CODEWITHSUNDEEP
javascriptreactjsstatesetstate
LiamRDawson
LiamRDawson

Reputation: 3

Why is my setState function overwriting current state?

I'm relatively new to React and I'm trying to set state using data that I'm receiving from a fetch response. To do this, I'm chaining a function that gathers the data needed, adds it to a state object and uses setState to add it toState and then do the same to the next response that comes in.

My problem is that each attempt is getting overwritten by the next, meaning only the last response is processed and added to sate.

What am I not doing, or doing incorrectly, that's causing this?

I've already tried using prevState however this breaks the page and produces an error: "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
    }]);
  }

Here's my state before the script runs:

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

On componentDidMount, I run a fetch request for each image in an array:

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

Here's the fetch request:

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

Which calls on a function that's supposed to process each response and add it to state:

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

The state ends up as being a single object as:

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

Upvotes: 0

Views: 70

Answers (1)

Taki
Taki

Reputation: 17654

if you don't specify they key that you want to update in the state it will add an object to it, and overwrite it everytime, you need to add the object to the images array in the state :

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

Upvotes: 1

Related Questions