如何限制我的数组的长度，该数组包含我从 React 中的数据中获取的消息

Question

所以我使用 pub/sub 模型来监听来自另一个客户端的发布消息，因为它们正在实时发送，并且我将这些消息作为数组存储在组件的状态对象中，并且我不断添加当他们进来时。我在图表中显示数据，但我想知道如何限制状态存储的消息数量，比如 50？正在考虑使用切片我应该改变状态来删除项目吗？

我应该在我的 ComponentDidMount 方法中添加一个 if 条件来检查这样的状态吗？

  if(this.state.data.length > 50) {
    this.setState({ data: this.state.slice(-50) })
  }

只是想看看有什么好的方法可以限制消息的数量，这样状态中就不会包含 50,000 个对象。谢谢

编辑：

根据 Asymons 的评论，我将其更改为如下所示。非常感谢你的评论很有帮助。我还有一个问题：你提到的关于减少重新渲染的最后一部分。这段代码是否满足那部分，因为我非常关心性能，所以我想尽可能减少重新渲染，再次感谢。

componentDidMount() {

client.on('message', (topic, payload, packet) => {
  console.log('topic: ', topic);

  const parsedPayload = JSON.parse(payload);
  if (parsedPayload.type !== 'pub') {
    return null;
  }
  const voltage = Math.trunc(parsedPayload.data.data.voltage);
  const pressure = Math.trunc(parsedPayload.data.data.air_pressure);
  const humidity = Math.trunc(parsedPayload.data.data.air_humidity);
  const temperature = Math.trunc(parsedPayload.data.data.air_temperature);
  const message = {
    time: moment().format('LT'),
    temperature,
    humidity,
    voltage,
    pressure,
    parsedPayload,
    topic,
  }
  this.setState((prevState) => {
    // create an array that holds objects with my data and push the 
    // message object as it comes in into the array
    const messages = [...prevState.messages]
    messages.push(message)
    if (prevState.messages.length > 20) {
      messages.pop()
      return {
        messages,
      };
    } else {
        return {
          messages,
        };
    }
  });
});

}

Answer 1

您需要确定数据的来源。

因此，无论您的网络请求在哪里，在您的 componentDidMount 中，您要么请求数据量（查看分页），要么获取整个有效负载并在数据进入时对其进行过滤。因此，在您的情况下，首先对其进行过滤。

你说你正在做一个发布/订阅模型，所以你会有一些数据流入，这很好。将您的注意力从对整个事物进行切片转移到将数据结构视为队列。当大小超过 50 或任何您的限制时，将项目推入并弹出它们。所以数据会像管道一样进入状态。

为了减少重新渲染，请将您的 this.state.data 复制到某个变量中，对该变量进行变异，然后使用该变异变量更新状态。

让我知道这是否适合你。