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

如何在React中正确绑定MongoDB中的数据？

1 个答案: