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';
}