Question

我有一个接受时间序列数据点作为道具的类组件。每次接收到新的数据点时，都会将该点添加到状态中的集合中（数据价值限制为7秒）。当前在componentWillReceiveProps中：

if (nextProps.data && this.props.data !== nextProps.data) {
  let { collection } = this.state
  collection = collection
    .addDatapoint(nextProps.data)
    .deduplicate() //removes duplicate entries
    .leftTrim(7000) //removes old entries as needed to prevent time window from exceeding 7 seconds

  this.setState({...this.state, collection})
}

在render中，我使用this.state.collection绘制了一个D3时间序列图。

我正在努力应对componentWillReceiveProps弃用情况下如何实现这一点。 React docs声称getDerivedStateFromProps应谨慎使用，它们提供了一些示例，说明如何使用render方法在没有它的情况下实现某些功能，但是我看不到如何在不调用{的情况下完成此操作我认为setState中的{1}}是不好的做法。

即使使用render，也无法访问以前的道具，因此除非将getDerivedStateFromProps复制到data，否则无法实现寻找数据道具变化的条件。感觉很尴尬。

我正在寻找重新实现与React未来方向兼容的方法的建议。

Answer 1

您可以使用componentDidUpdate方法。

componentDidUpdate(prevProps) {
    if (this.props.data && prevProps.data !== this.props.data) {
        let { collection } = this.state
        collection = collection
        .addDatapoint(this.props.data)
        .deduplicate() //removes duplicate entries
        .leftTrim(7000) //removes old entries as needed to prevent time window from exceeding 7 seconds

        this.setState({...this.state, collection})
    }
}

如何为在状态下聚合道具的组件删除componentWillReceiveProps

1 个答案: