javascript - React table- doesn't refresh content

I am trying to refresh content in the table generated with this library react-table. However, for some reason, it doesn't work, even though I change the state of the parameter which I pass to the Component.

<ReactTable
   data={this.state.data}
   columns={this.state.headers}
/>

And the function which changes data:

  let data= this.state.data;
  for (var i = 0; i < data.length; i++) {
    data[i].name="TEST"
  }
  this.setState({data: data})

I can see that the data has changed but the content of the table stays the same.

<ReactTable
   data={this.state.data}
   columns={this.state.headers}
/>

And the function which changes data:

  let data= this.state.data;
  for (var i = 0; i < data.length; i++) {
    data[i].name="TEST"
  }
  this.setState({data: data})

I can see that the data has changed but the content of the table stays the same.

Share Improve this question asked Aug 19, 2018 at 22:22 Grzegorz Brzęczyszczykiewicz 1,6742 gold badges24 silver badges51 bronze badges

As a suggestion, do not assign your state data into a variable like that. Use Object.assign or spread syntax: let data = [ ...this.state.data ] Also, do not change a key's value like that, since if you change with this way, your original object mutates, too. Use .map as suggested @Shishir Arora's answer. This applies to spread syntax since it makes a shallow copy. – devserkan Commented Aug 19, 2018 at 22:43

Add a ment |

1 Answer 1

Sorted by: Reset to default 12

let data= this.state.data;
const newData = data.map(d=>({...d, name:"Test"}));
this.setState({data: newData})

Use above code. Reason: React does not see mutation.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - React table- doesn't refresh content - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)