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

我相对来说还不太会做出反应，我正在尝试使用从fetch响应接收到的数据来设置状态。为此，我链接了一个函数，该函数收集所需的数据，将其添加到状态对象，并使用setState将其添加到状态，然后对传入的下一个响应执行相同的操作

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

我没有做什么，或者做得不正确，是什么导致了这一切

我已经尝试使用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/
}

---

如果未指定要在状态下更新的密钥，则会向其中添加一个对象，每次都会覆盖该对象，您需要将该对象添加到状态下的图像数组中：

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