javascript - 为什么我的 setState 函数会覆盖当前状态？

Question

我对 React 比较陌生，我正在尝试使用从获取响应接收到的数据来设置状态。为此，我链接了一个函数，该函数收集所需的数据，将其添加到状态对象，并使用 setState 将其添加到State，然后对传入的下一个响应执行相同的操作。

我的问题是每次尝试都会被下一次覆盖，这意味着只有最后一个响应会被处理并添加到状态。

我没有做什么，或者做错了什么，导致了这种情况？

我已经尝试过使用 prevState，但这会破坏页面并产生错误:“传播不可迭代实例的尝试无效”

 buildDataObject = (str, arr) => {
    this.setState(prevState => [...prevState, {
      name: str,
      labels: arr.map(obj => obj.description),
      id: arr[0].mid
    }]);
  }

这是脚本运行之前我的状态:

  constructor(){
    super();
    this.state = {
      images: []
    }
  }

在 componentDidMount 上，我对数组中的每个图像运行获取请求:

  componentDidMount() {
    images.forEach(index => this.getLabels(index));
  }

这是获取请求:

  getLabels = (path) => {
    const url = getGoogleVisionUrl();
    fetch((url), {
      method: 'POST',
      body: JSON.stringify(createRequestJSON([path]))
    }).then(response => response.json())
      .catch((err) => { console.log('error!', err); })
      .then(data => data.responses[0].labelAnnotations)
      .then(arr => this.buildDataObject(path, arr));
  }

它调用一个应该处理每个响应并将其添加到状态的函数:

  buildDataObject = (str, res) => {
    this.setState([{
      name: str,
      labels: res.map(obj => obj.description),
      id: res[0].mid
    }]);
  }

状态最终成为单个对象:

{
  name: / string response data /,
  labels: /an array or strings/,
  id: /an ID number/
}

Answer 1

如果你没有指定你想要在状态下更新的键，它会向其中添加一个对象，并且每次都会覆盖它，你需要将该对象添加到状态下的图像数组中:

buildDataObject = (str, arr) => {
  this.setState(prevState => ({
    images: [
      ...prevState.images,
      {
        name: str,
        labels: arr.map(obj => obj.description),
        id: arr[0].mid
      }
    ]
  }));
};