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

Question

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

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

我没有做什么或做错了什么导致了这个？

我已经尝试过使用 prevState 但这会破坏页面并产生错误："Invalid attempt to spread non-iterable instance"

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

这是我在脚本运行s 之前的状态：

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

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

Why is my setState function overwriting current state?

javascript

state

setstate

reactjs