javascript - 为什么我的 React 组件没有在 setState() 上重新渲染？

Question

我有以下代码(为了简单起见而简化)。我希望我的提交组件在单独单击(有效)或按下按钮以显示所有作者(无效)时显示作者。

我已经确认，当我单击按钮时，SubmissionList 状态正在更改，并且提交的初始状态也已正确设置，那么为什么 setState 更改没有过滤到提交？

我确信我错过了一些东西，所以任何帮助将不胜感激。谢谢!

let Submission = React.createClass({
  getInitialState: function() {
    return {
      showAuthor: this.props.revealed
    };
  },

  reveal: function() {
    this.setState({
      showAuthor: !this.state.showAuthor
    });
  },

  render: function() {
    let authorText;
    if (this.state.showAuthor) {
      authorText = " - " + this.props.author;
    } else {
      authorText = "";
    }

    return (
      <li className="submission" onClick={this.reveal}>
        <span className="submissionText">
          {this.props.text}
        </span>
        <span className="submissionAuthor">
          {authorText}
        </span>
      </li>
    );
  }
});

let SubmissionList = React.createClass({
  getInitialState: function() {
    return {
      revealAll: true
    };
  },

  revealAllSubmissions: function() {
    this.setState({
      revealAll: !this.state.revealAll
    });
  },

  render: function() {
    let revealed = this.state.revealAll;
    let submissionNodes = this.props.data.map(function(submission) {
      return (
        <Submission author={submission.author} key={submission.id} text={submission.text} revealed={revealed} />
      );
    });

    return (
      <div className="allSubmissions">
        <button onClick={this.revealAllSubmissions}>Reveal All</button>
        <ul className="submissionList">
          {submissionNodes}
        </ul>
      </div>
    );
  }
});

编辑:实际上无法看到段落中写出的我的标签。为了清晰起见进行了更新。

Answer 1

如果您希望两个组件都具有内部状态，则需要添加 componentWillReceiveProps 提交的处理程序。并同步 Prop 以进行说明。

let Submission = React.createClass({
  getInitialState: function() {
    return {
      showAuthor: this.props.revealed
    };
  },
  componentWillReceiveProps: function(nextProps) {
     if(this.props.revealed !== nextProps.revealed) {
        this.setState({
           showAuthor: nextProps.revealed
        });
     }
  },
  ...

但是正如您所看到的，这会导致代码重复。现在你有两个状态源(props 和内部组件状态)。更好的想法是将状态移动到父组件并使 Submission 成为代表性组件(没有内部状态)

let Submission = ({showAuthor, author, toggle, text}) => (
  <li className="submission" onClick={toggle}>
    <span className="submissionText">
      {text}
    </span>
    <span className="submissionAuthor">
      {showAuthor ? `-${author}` : null}
    </span>
  </li>
)

其中toggle是一个函数，用于切换showAuthor以存储在SubmissionList状态中的当前提交。

UPD 您可以传递仅切换当前提交的特定切换。例如

let submissionNodes = this.props.data.map(function(submission) {
  return (
    <Submission
      author={submission.author}
      key={submission.id} 
      text={submission.text}
      toggle={() => this.toggleSubmissionById(submission.id)} />
  );
})