ReactJS未定义的arr.map

Question

I´m fetching data from API and then using arr.map() to filter the data* ( API returns unecessary properties )

This is working:

  fetchTable() { const url = 'http://localhost:8000/issues/assigned/'; const value = this.state.selectedOption; const string = url+value; fetch(string) .then(function(response) { return response.json(); }) .then((myJson) => this.setState({data: myJson.issues})); } const filteredResult1 = this.state.data.map(item => ( { name: item.fields ? item.fields.assignee.name : '', id: item.id, key: item.key, timespent: item.fields ? this.timeConvert(item.fields.timespent) : '', project: item.fields ? item.fields.project.name : '', status: item.fields ? item.fields.status.name : '', created: item.fields ? item.fields.created : '', resolution: item.fields ? item.fields.resolutiondate : '' } )); 

But now i need to setState multiple times, soo i can render a table for each array with the filtered Data, but the result from map is allways undefined!

 .then((myJson) => this.setState({data: [...this.state.data, myJson.issues]}));

This is NOT working:

  fetchTable() { const url = 'http://localhost:8000/issues/assigned/'; const value = this.state.selectedOption; const string = url+value; fetch(string) .then(function(response) { return response.json(); }) .then((myJson) => this.setState({data: [...this.state.data, myJson.issues]})); } var result = this.state.data.map((item)=>{ return {id:item.id, example: item.example}; }); console.log(result) 

Answer 1

 let array1 = [ 1,2,3 ]; let array2 = [ 4,5,6 ] // ...array1 is destructuring array1 // and which leads to an unexpected result console.log([...array1, array2]); 

Change this line

  .then((myJson) => this.setState({data: [...this.state.data, myJson.issues]}));

to this

.then((myJson) => this.setState({
    data: this.state.data.concat(myJson.issues)
}));

You can find in the code attached that the resulted array is not what you expect.