为什么我的 React child 组件没有收到新的道具？

Question

我有一个充当 sor 的 React 组件table table。 table header 和 table 行是容器的 children，容器正在处理 table 的状态。单击 header 时，数据为 re-ordered 就像在 this semantic-ui-react example.

中一样

handleSort = (clickedColumn) => {
const { column, orders, direction } = this.state

if (column !== clickedColumn) {
  this.setState({
    column: clickedColumn,
    orders: customSort(orders, clickedColumn),
    direction: 'ascending',
  })
} else {
this.setState({
  orders: orders.reverse(),
  direction: direction === 'ascending' ? 'descending' : 'ascending',
})}

我第一次点击列header，第一个闭包运行，this.setState改变容器的状态，并触发children接收新的道具和相应更新。如果我 re-click 列 header 反转数据的顺序，第二个闭包运行，并且 this.setState 更新容器的状态。因此，child 组件 OverviewTableHeader 更新，但 OverviewTableRows 不更新。

render() {
const { designers, orders, column, direction } = this.state
if (orders === "loading"){
  return <Loading />
} 
const tableRows = <OverviewTableRows  
                     designers={designers} 
                     orders={this.state.orders}
                     />
debugger
return (
  <div className="overview">
    <Table selectable fixed sortable>
      <OverviewTableHeader sort={this.handleSort} column={column} direction={direction}/>
      {tableRows}
    </Table>
  </div>
  ) 
}

Here's a video of this in action.

在视频中可以看到OverviewTableRows触发componentWillReceiveProps和shouldComponentUpdate第一次setState是在parent触发的，但不是第二.

如果需要，我可以添加我的所有代码。这是一个错误吗？非常感谢任何帮助！

Answer 1

我通过在反转数组之前复制数组并使用它来更新状态来解决这个问题。

handleSort = (clickedColumn) => {
const { column, orders, direction } = this.state

if (column !== clickedColumn) {
  this.setState({
    column: clickedColumn,
    orders: customSort(orders, clickedColumn),
    direction: 'ascending',
  })
} else {
  const reversedOrders = orders.slice().reverse();
this.setState({
  orders: reversedOrders,
  direction: direction === 'ascending' ? 'descending' : 'ascending',
})}

我想数组的身份 orders 很重要。我猜这与 React 的功能特性有关。我希望这对某人有帮助！如果有人能很好地解释为什么会这样，我很乐意听听。

Answer 2

这里有一段很好的引述，可以解释发生了什么。

By manipulating this.state directly you are circumventing React’s state management, which can be potentially dangerous as calling setState() afterwards may replace the mutation you made.

摘自 this article.

由于 orders 是一个可变对象并且是 state 的成员，您在调用 orders.reverse 时直接改变了状态（即使这种重新排序是在 state 中完成的=13=]呼唤）。

所以，是的，您创建 orders 副本的解决方案将解决此问题，因为您不再直接更改 this.state。

为什么我的 React child 组件没有收到新的道具？

Why isn't my React child component receiving new props?

setstate

reactjs

react-lifecycle