0

您能否建议我如何更新网格中的数据。我正在更新服务器请求的数据。如何重新渲染数据表？在渲染部分，我使用了 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>
            }
          }
  • 拉贾
4

2 回答 2

1

您需要使用状态.. 并在收到服务器的响应时调用 setState。调用 setState 函数会自动调用 render 函数

于 2018-04-18T05:50:58.900 回答
0

当您想根据数据的变化更新视图时，您应该将数据存储在状态中并使用 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>
         )
      }
}
于 2018-04-18T06:02:05.760 回答