我有一个充当可排序表的 React 组件。表头和表行是容器的子项,容器正在处理表的状态。单击标题时,数据会重新排序,就像在这个语义 UI 反应示例中一样。
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',
})}
第一次单击列标题时,第一个闭包运行,并this.setState
更改容器的状态,并触发子项接收新的道具并相应地更新。如果我重新单击列标题以反转数据的顺序,则第二个闭包运行,并this.setState
更新容器的状态。因此,子组件会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>
)
}
在视频中,您可以看到OverviewTableRows
触发器componentWillReceiveProps
,shouldComponentUpdate
第一次setState
在父级中触发,但不是第二次。
如果需要,我可以添加我的所有代码。这是一个错误吗?任何帮助是极大的赞赏!