ReactJS fetch for each value of array

Question

I have a Multi-Select

The select saves the values into a string separeted by commas, soo i use zag() to transform the string into an array

this.state.value: zemm,lena

After zag():

cleanArray : ["zemm","lena"];

After having a clean array i was trying to fetch data for each value in the array, my idea was concatenating the data for every name selected. But once i remove values from the array the Data keeps multiplicating.

If i select "zemm" which lets say it has an array of 10 objects [{...},{...}..]. and then remove it, i end up with 20 objects, if i add it again, 30 objects ...

 zag(){
    const arrayMessy = this.state.value +'';
    var arraySplit = [];
    arraySplit = arrayMessy.split(',');
    this.setState({cleanArray: arraySplit},() => this.zag2());
  }

  zag2(){
    var arrayLimpo = this.state.cleanArray;
    for (var i = 0; i < arrayLimpo.length; i++) {
      const url = 'http://localhost:8000/issues/assigned/';
      const value = arrayLimpo[i];
      const string = url+value+'&maxResults=5000';
      fetch(string)
      .then(function(response) {
        return response.json();
      })
      //.then((myJson) => this.setState({data: myJson.issues}));
      .then((myJson) => this.setState({ data: this.state.data.concat(myJson.issues)}));
      }
    }

Any help appreciated! Thanks

kristaps · Accepted Answer · 2018-06-15 16:18:27Z

1

Your code seems to have the correct but commented out version right above the line which causes problems. Your data is multiplying because you concatenate whatever the server returned to whatever was already there - the existing data array is not cleared between requests.

Edit: Understood the problem now, you could change

this.setState({cleanArray: arraySplit},() => this.zag2());

to

this.setState({cleanArray: arraySplit, data: []},() => this.zag2());

then it would work as you expect.

edited Jun 15, 2018 at 16:18

answered Jun 15, 2018 at 16:05

kristaps

1,74311 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zemmsoares Over a year ago

Thanks @kristaps .then((myJson) => this.setState({data: myJson.issues})); But this way, this.state.data will only have the data from the last fetch, since it will overwrite it!

kristaps Over a year ago

Ok, I think I understand now, does the server support requesting data for multiple items at once?

Collectives™ on Stack Overflow

ReactJS fetch for each value of array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related