React Native 接收新的 props，componentWillReceiveProps

Question

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

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

有没有更好的方法来做到这一点？ 如果我这样做是最好的方法 - >

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;
}

但我对我来说工作得不太好。c

Answer 1

在您的评论中，您提到：

当我回到 ListView 时，我不喜欢的项目还在那里，另一个项目消失了

这看起来像是一个完全不同领域的问题。 我的猜测是您在列表中使用了错误的key 。 大概是一个索引。 键对于您正在显示的项目应该始终是唯一的，而索引不是（例如，第一项始终是索引 0，当您重新排列列表或删除第一项时，另一项将具有索引 0，并且 react 不会那么工作得很好。）进一步解释here 。

关于“正确更新组件”：

• 如果你传入新的道具，react 会自动使用新的道具重新渲染。 您不需要为此在componentWillReceiveProps做任何事情。
• componentWillReceiveProps用于更新状态，基于比较 OLD 和 NEW props。 （例如，如果您想显示道具中的点赞数是上升还是下降）
• shouldComponentUpdate是可选的。 主要目的是在不改变组件工作的任何功能更改的情况下提高性能：尽早告诉 react 组件未更改。 我建议不要包含shouldComponentUpdate只要您的组件还没有按预期工作。

Answer 2

这里有一个疯狂的猜测。 在我看来，您在正确实施shouldComponentUpdate遇到问题。 我相信您尝试比较nextProps.data对象并且总是有不相等的结果，即使其中的数据是相等的。 原因是对象对data对象的引用不同。 为了克服这个问题，您应该进行深入比较，类似于lodash的_.isEqual 。

正如在评论中提到的，在更新nextProps componentWillReceiveProps是一个可怕的想法。