如何在 React 中正确绑定来自 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>  );};到目前为止，它只是不断向我抛出未定义的错误，或者根本不显示任何内容。请允许我说这是我第一次使用 React，实际上我从来没有遇到过 JavaScript 的问题，所以如果你们中的任何人可以指导我并告诉我我的错误是什么，请这样做。