javascript - 如何在 React 中正确绑定(bind)来自 MongoDB 的数据？

Question

基本上，我使用两个组件从数据库中获取数据。一个用于循环遍历它们，另一个用于访问和查看每个条目的数据。我在数据库中有一个名为“性别”的字段，用户可以在其中提交男性、女性和/或其他信息。我正在尝试做一个 if 语句，但它不起作用，或者我可能没有我想象的那么好。

我在文件 (Secrets.js) 中完成了此操作，我在其中循环(我也在其中使用了不同的组件)它们:

import React, { Fragment, useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Spinner from '../layout/Spinner';
import SecretItem from './SecretItem';
import { getSecrets } from '../../actions/secret';

const Secrets = ({ getSecrets, secret: { secrets, loading } }) => {
  useEffect(() => {
    getSecrets();
  }, [getSecrets]);
  return loading ? (
    <Spinner />
  ) : (
    <Fragment>
      <div className="container">
        <Fragment>
          {secrets.map(secret => (
            <SecretItem key={secret._id} secret={secret} />
          ))}
        </Fragment>
      </div>
    </Fragment>
  );
};

Secrets.propTypes = {
  getSecrets: PropTypes.func.isRequired,
  secret: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  secret: state.secret
});

export default connect(
  mapStateToProps,
  { getSecrets }
)(Secrets);

问题不是我不能获取数据，因为我实际上可以，我可以获得标题、日期、文本等。真正的问题是 - 是当想要获取条件数据时，如第一段。这是我的 SecretItem 组件:

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { deleteSecret } from '../../actions/secret';

const SecretItem = ({ secret: { _id, age, sex, text, date } }) => {
  if (sex === 'male') {
    const sexo = 'male';
  } else if (sex === 'female') {
    const sexo = 'female';
  } else {
    const sexo = 'other';
  }
  return (
    <article className={`card text-center ${_id}`}>
      <div className="card-header">
        <span className="badge age badge-info">{age}</span>
        <span className="badge sex badge-secondary">{sexo}</span>
        <p>{text}</p>
        <P>{date}</P>
      </div>
    </article>
  );
};

SecretItem.propTypes = {
  secret: PropTypes.object.isRequired,
  deleteSecret: PropTypes.func.isRequired
};

export default connect(
  null,
  { deleteSecret }
)(SecretItem);

到目前为止，它一直向我抛出未定义的错误，或者根本不显示任何内容。请允许我说这是我第一次使用 React，实际上我从来没有遇到过 JavaScript 的问题，所以如果你们中的任何人可以指导我并告诉我我的错误是什么，请这样做。

Answer 1

就像 Li357 说你的 sexo 范围不可达。

import React, { Fragment, useState } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { deleteSecret } from '../../actions/secret';

const SecretItem = ({ secret: { _id, age, sex, text, date } }) => {
  const sexo = sex || 'other';

  return (
    <article className={`card text-center ${_id}`}>
      <div className="card-header">
        <span className="badge age badge-info">{age}</span>
        <span className="badge sex badge-secondary">{sexo}</span>
        <p>{text}</p>
        <P>{date}</P>
      </div>
    </article>
  );
};

SecretItem.propTypes = {
  secret: PropTypes.object.isRequired,
  deleteSecret: PropTypes.func.isRequired
};

export default connect(
  null,
  { deleteSecret }
)(SecretItem);

如果设置 sexo 的值变得更复杂，则必须在条件语句之前将该值定义为 let。例如:

let sexo = 'not specified' 

if (sex === 'male') {
  sexo = 'male';
} else if (sex === 'female') {
  sexo = 'female';
} else {
  sexo = 'other';
}