3

这是场景。我有一个父组件，一个子组件。父组件执行 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.         
            })
    }
}

我想不出我需要在 componentDidUpdate （孩子的）内部检查的情况

prevState !== this.state

这是因为当我将新数据传递给子组件时，this.state 将等于 prevState（这将是旧状态，在接收新数据之前）；即在我运行上述 setState 之前，prev 和 current 状态将保持不变。

因此我的问题是，在什么情况下我需要检查 prevState != this.state ？

4

2 回答 2

1

适用于道具的相同场景也适用于道具。可能会发生这样的情况，即在状态更改时，您需要触发 API 调用来获取数据。现在您可能决定在setState回调中调用一个函数，但是如果从多个地方更改相同的状态，那么这componentDidUpdate是一个好地方。

于 2018-11-26T09:32:25.797 回答
0

按原样比较状态没有意义，因为它们永远不会相同。您以这种方式比较的是对状态的引用，而不是嵌套值。此外，你应该小心使用这个函数，并且在 componentDidUpdate 中使用 setState 被认为是一种反模式并且是不可取的——甚至有一个ESlint 规则强制不这样做。

比较状态（或道具）的一种情况是在shouldComponentUpdate(nextProps, nextState)您决定组件是否应该更新的函数中（返回布尔值）。

于 2018-11-26T09:32:26.487 回答