javascript - 状态改变后 react 不重新渲染，我如何设置子组件的状态？

Question

问题:

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

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 重新分配给排序函数的输出。

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

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

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

在任何排序之前:

按名字排序后:

立法者的其他职能:

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

Answer 1

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

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

只运行一次，因为构造函数也只运行一次。并且子组件中的 state.legislator 不会自动更新，除非您在子组件内显式执行 this.setState()。

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

可以在子组件的render方法中直接使用this.props，当父组件的state改变时，子组件将使用新 Prop 重新渲染。

 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"]