ReactJS undefined arr.map

时间:2018-06-01 12:57:24

标签: javascript reactjs

我从API获取数据,然后使用arr.map()过滤数据*(API返回不必要的属性)

这是有效的:

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

但是现在我需要多次setState,所以我可以使用过滤后的数据为每个数组渲染一个表,但是地图的结果总是未定义!

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

这不起作用:

   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)

enter image description here

1 个答案:

答案 0 :(得分:0)

undefined

更改此行

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

到这个

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

您可以在附带的代码中找到结果数组不是您所期望的。