基本上，我使用两个组件从数据库获取数据。一个组件用于循环访问数据，另一个组件用于访问和查看每个条目的数据。我在数据库中有一个名为“性别”的字段，用户可在该字段中提交男性、女性和/或其他。我试图执行 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 问题，所以如果你们中的任何人可以指导我并告诉我我的错误是什么，请这样做。