Question

我是React的新手。我有一个组件，显示表中的项目列表。我需要添加第二个组件来汇总和显示有关项目的一些信息。

我使用props将项目列表从父组件传递到摘要：

// Parent component
<SummaryTable items={this.state.items} />

然后在SummaryTable我按类别计算总数：

class SummaryTable extends Component {

constructor(props) {
  super(props);

  this.state = {'categories': this.summarizeCategories(props.items)};
  this.renderRows = this.renderRows.bind(this);
}

componentWillUpdate(nextProps, nextState) {
  console.info(nextProps);
  console.info(nextState);
}

summarizeCategories(items) {
  var categories = new Map();
  items.forEach((item) => {
    if(categories.has(item.category)) {
      let total = categories.get(item.category);
      categories.set(item.category, total + item.amount);
    } else {
      categories.set(item.category, item.amount);
    }
  });
  return categories;
}

renderRows() {
  return this.state.categories.forEach((value, key) => (
    <tr>
      <td>{key}</td>
      <td>{value}</td>
    </tr>
  ));
}

render() {
  return (
    <div className="SummaryTable">
      <table>
        {this.renderRows()}
      </table>
    </div>
  );
}

}

此代码存在的问题是，state更改时，SummaryTable中的props.items不会更新。

我认为在componentWillUpdate更改后我可以setState使用props，但这会导致无限循环（因为设置状态会导致再次调用componentWillUpdate）。

处理此问题的最佳方法是什么？我想我可以在父组件中进行计算并将其传递下去。

Answer 1

使用componentWillReceiveProps()代替componentWillUpdate（）。

React子组件，用于汇总和显示在props

1 个答案: