Question

我过去曾使用过componentDidUpdate()，它已按预期运作。

然而，这一次，我做了

componentDidUpdate(prevProps, prevState) {
    if (prevState.object.someString !== this.state.object.someString) {
        console.log(true);
    }
}

永远不会记录

和true。我将两个状态对象记录到控制台，发现它们完全相同：当前状态。

这是一个错误吗？我在这里缺少什么？

谢谢。

编辑：我尝试用componentWillUpdate(nextProps, nextState)做同样的事情，再次，他们是同一个对象。

编辑2：我正在改变状态：

modifyObject = (field, value) => {
    const { object } = this.state;
    object[field] = value;
    this.setState({ object });
}

Answer 1

在添加的代码中，您通过仅更改对象上的属性来改变引用对象。这意味着最终nextProps和previousProps实际上是指相同的参考。

因此，componentDidUpdate没有发现差异就不足为奇了。

您应该做的是创建对象的新版本，并使用该版本设置状态，如：

this.setState({ object: { ...object, [field]: value } })

或者如果你没有传播运营商，比如

this.setState( { object: Object.assign({}, object, { [field]: value }) } );

Answer 2

请注意：

如果shouldComponentUpdate（）返回false，则不会调用

componentDidUpdate（）。 参考：https://reactjs.org/docs/react-component.html#componentdidupdate

 shouldComponentUpdate(nextProps, nextState) {
    if (this.state.someString !== nextState.someString) {
      return true;
    }
    return false;
  }

componentDidUpdate(prevProps, prevState) {
    if (prevState.someString !== this.state.someString) {
        console.log(true);
    }
}

在某些情况下，当你使用shouldComponentUpdate时，更好地使用lodash isEqual方法来深入比较你的状态/道具：

shouldComponentUpdate(nextProps, nextState) {
        return !isEqual(this.state, nextState);
      }

如果您拥有复杂的道具/状态，这将提高您的表现，因为不会发生浪费的渲染

Answer 3

感谢Icepickle的评论，解决了这个问题。

而不是做

modifyObject = (field, value) => {
    const { object } = this.state;
    object[field] = value;
    this.setState({ object });
}

我做了

modifyObject = (field, value) => {
    const { object } = this.state;
    this.setState({ object: { ...object, [field]: value } });
}

再次感谢。

componentDidUpdate中的prevState是currentState吗？

3 个答案: