Question

我在我的组件上遇到了一些更新。我知道我不应该在州内设置道具。但是，我必须这样做才能正确更新组件：

componentWillReceiveProps(nextProps) {
    this.setState({
      doctor: nextProps.data.name,
      address: nextProps.data.address 
    })
}

有没有更好的方法呢？如果我这样做是最好的方法 - ＆gt;

componentWillReceiveProps(nextProps) {
        this.props.data.name = nextProps.data.name;
        this.props.data.name = nextProps.data.address;
     })
 }

我试图使用shouldComponentUpdate：

shouldComponentUpdate: function(nextProps, nextState) {
  return nextProps.id !== this.props.id;
}

但我对我的工作并不好。

Answer 1

在你的评论中，你提到：

当我回到ListView时，我仍然不喜欢那个项目另一个项目消失了

这看起来像是一个完全不同的领域的问题。我的猜测是你在列表中使用了错误的key。可能是一个指数。键应始终对您正在显示的项唯一，索引不是（例如，第一项始终为索引0，当您重新排列列表或删除第一项时，另一项将具有索引0，并且反应不会那么工作得很好。）Further explanation here。

关于“正确更新组件”：

如果您传入新道具，则会自动使用新道具重新渲染。您无需在componentWillReceiveProps中执行任何操作。
componentWillReceiveProps用于更新状态，基于比较OLD和NEW道具。（例如，如果你想显示道具中的喜欢数量是上升还是下降）
shouldComponentUpdate是可选的。主要目的是提高性能而不对组件的工作进行任何功能性更改：尽早判断组件是否未更改。只要您的组件尚未按预期工作，我建议不要包含shouldComponentUpdate。

Answer 2

在这里疯狂猜测。正如我所看到的那样，您遇到了正确实施<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="element"></div> <div id="log"></div>的问题。我相信您尝试比较shouldComponentUpdate个对象并始终具有不等于结果，即使其中的数据相等。原因是对象nextProps.data对象的引用是不同的。为了克服这个问题，您应该进行深入的比较，而不是lodash data。

如评论中所述，更新_.isEqual中的nextProps是一个可怕的想法。

React Native接收新道具，componentWillReceiveProps

2 个答案: