代码之家 › 专栏 › 技术社区 › joedotnot

ComponentDidUpdate和prevState

react-state react-lifecycle reactjs

1

joedotnot · 技术社区 · 7 年前

下面是一个场景。我有一个父组件,还有一个子组件。父组件执行ajax调用并将数据向下推送到子组件。

当子组件接收到新数据时,在(子组件的)componentDidUpdate中,我将重新设置其内部状态。

componentDidUpdate(prevProps, prevState) { 

    if ( prevProps.myRow !== this.props.myRow ) { //check for when new data is passed into this component from its parent / container...
            this.setState({
                editableRowObj    : this.props.myRow    //... only then I should bother updating the state with the new data passed in.         
            })
    }
}

这是因为当我将新数据传递到子组件时,This.state将等于prevState(在接收新数据之前,它将是旧状态);i、 e.在我运行上述设置状态之前,上一个和当前状态将保持不变。

2 回复 | 直到 7 年前

1

Shubham Khatri 7 年前

适用于道具的场景也适用于道具。在状态发生变化时,您可能需要触发API调用来获取数据。现在您可以决定在 setState componentDidUpdate

2

0

Gilad Bar 7 年前

比较各州的现状是没有意义的,因为它们永远不会相同。以这种方式比较的是对状态的引用,而不是嵌套值。此外,您应该小心使用此函数,在componentDidUpdate中使用setState被认为是一种反模式,不可取——甚至还有 ESlint rule 这迫使我们不要这样做。

函数中有一个比较状态(或道具)的场景 shouldComponentUpdate(nextProps, nextState) 其中,您决定组件是否应该更新(返回布尔值)。