Javascript ReactTable-使用REST API调用对组件进行反应

你能建议我如何更新网格中的数据吗。我正在更新服务器请求上的数据。如何重新呈现数据表？在渲染部分，我使用了react Table组件。您能否建议我使用此react table组件的实际方法>

          import React, { PureComponent } from 'react';
          import ReactTable from 'react-table'
          import "./Vendors.css";

          export default class VendorsList extends PureComponent {

            data = [{
              name: 'Tanner Linsley',
              age: 26,
              friend: {
                name: 'Jason Maurer',
                age: 23
              }
            }];

            columns = [{
              Header: 'Name',
              accessor: 'name' // String-based value accessors!
            }, {
              Header: 'Age',
              accessor: 'age',
              Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
            }, {
              id: 'friendName', // Required because our accessor is not a string
              Header: 'Friend Name',
              accessor: d => d.friend.name // Custom value accessors!
            }, {
              Header: props => <span>Friend Age</span>, // Custom header components!
              accessor: 'friend.age'
            }];

            constructor(props) {
              super(props);

            fetch("http://api.com/vendor/list", {
              method : 'POST'
            })
              .then(res => res.json())
              .then(
                (result) => {
                  this.data = [{
                    name: 'Tanner Linsley',
                    age: 290,
                    friend: {
                      name: 'Maurer',
                      age: 23
                    }
                  }];
                }
              )   
          }

              render() {
                return 
                  <div> 
                  <div className="gridsize"><ReactTable data={this.data} columns={this.columns} /></div>
                  </div>
            }
          }

拉贾 你需要使用状态。。

---

并在收到服务器响应时调用setState。调用setState函数将自动调用render函数

如果要根据数据的更改更新视图，则应将数据存储在状态中，并使用setState进行更新，这将触发重新渲染和更新视图。此外，API请求必须在componentDidMount生命周期函数中处理，而不是在构造函数中处理

export default class VendorsList extends PureComponent {

       state = {
            data = [{
              name: 'Tanner Linsley',
              age: 26,
              friend: {
                name: 'Jason Maurer',
                age: 23
              }
            }];
       }

       columns = [{
              Header: 'Name',
              accessor: 'name' // String-based value accessors!
            }, {
              Header: 'Age',
              accessor: 'age',
              Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
            }, {
              id: 'friendName', // Required because our accessor is not a string
              Header: 'Friend Name',
              accessor: d => d.friend.name // Custom value accessors!
            }, {
              Header: props => <span>Friend Age</span>, // Custom header components!
              accessor: 'friend.age'
            }];

      componentDidMount() {

         fetch("http://api.com/vendor/list", {
              method : 'POST'
         })
         .then(res => res.json())
         .then((result) => {
            this.setState({data: [{
                name: 'Tanner Linsley',
                age: 290,
                friend: {
                   name: 'Maurer',
                   age: 23
                 }
               }]
            });
         )}; 
     }
     render() {
         return (
            <div> 
               <div className="gridsize"><ReactTable data={this.state.data} columns={this.columns} /></div>
            </div>
         )
      }
}