React 在状态更改后不重新渲染，如何设置子组件的状态？

Problem:

我将立法者集合放入表中，字段标题是按钮，并附加了单击事件，通过单击的字段按钮对集合进行排序。

render() {
    const legislatorList = this.populateList() //  creates an Array of Legislator components
    return (
      <div className="legislators">
        <h2>Legislators</h2>
        <table className="table table-bordered">
        <thead>
          <tr>
            <th><button type="button" onClick={ () => this.handleChange("first_name")}  >First</button></th>
            <th><button type="button" onClick={ () => this.handleChange("last_name")}  >Last</button></th>
            <th><button type="button" onClick={ () => this.handleChange("state")}  >State</button></th>
            <th><button type="button" onClick={ () => this.handleChange("party")}  >Party</button></th>
          </tr>
        </thead>
          <tbody>
            { legislatorList }
          </tbody>
        </table>
      </div>
    );

单击事件将 this.state.legislators 重新分配给 a sort 函数的输出。

handleChange( value ) {
    this.setState( { legislators: this.sort_by( value) })
  }

但即使 state.legislators 的更新状态已正确排序，该表仍保持不变。

我认为我的问题是立法者的子立法者组件没有更新其状态。所以我的问题是如何更新子组件的状态？

Before Any Sorting:

After Sorting by First Name:

立法者的其他职能：

sort_by(sort_by) {
  const sorted = this.state.legislators.sort(function(a, b) {
    a_val = a[sort_by]
    b_val = b[sort_by]
    if (a_val < b_val) {
      return -1;
    }
    if (a_val > b_val) {
      return 1;
    }
    return 0;
  });
  return sorted
}

renderLegislator(legislator) {
  return <Legislator legislator={ legislator}/>
}

populateList() {
  return this.state.legislators.map((legislator) =>
    this.renderLegislator(legislator)
  )}
}

这是立法者部分：

class Legislator extends React.Component {
  constructor(props) {
    super();
    this.state = {
      legislator: props.legislator,
      fields: ["first_name", "last_name", "state", "party"]
    }
  }

  render() {
    const legislatorRow = this.state.fields.map((field) =>
        <LegislatorField value={ this.state.legislator[field] } />
    )
    return (
      <tr key={this.state.legislator.id}>
        { legislatorRow }      
      </tr>
    );
  }
}

The state.legislator您的子组件中的代码未更新，因为代码：

this.state = {
  legislator: props.legislator,
  fields: ["first_name", "last_name", "state", "party"]
}

只运行一次，因为构造函数也只运行一次。还有state.legislator除非您这样做，否则子组件中的内容不会自动更新this.setState()显式地位于子组件内。

但是，没有必要按照您正在做的方式来做。维持自己的状态props在子组件中是绝对多余的。

您可以直接使用this.props inside render子组件中的方法，并且当state父组件发生变化，子组件将使用新的 props 重新渲染。

 class Legislator extends React.Component {
  constructor(props) {
    super();
    this.state = {
      fields: ["first_name", "last_name", "state", "party"]
    }
  }

  render() {
    const legislatorRow = this.state.fields.map((field) =>
        <LegislatorField value={ this.props.legislator[field] } />
    )
    return (
      <tr key={this.state.legislator.id}>
        { legislatorRow }      
      </tr>
    );
  }
}

作为奖励，如果您this.state.fields始终是恒定的——您不打算稍后更新它，也不必将其作为状态。您可以简单地将其设为类实例字段，如下所示this.fields = ["first_name", "last_name", "state", "party"]