Question

在反应组件方法data中更新状态属性componentDidMount的值不会更新反应表数据。

在构造函数中调用getData可以正常工作。

App.js

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }

  getData() {
    var MOUNTAINS = [
      {name: "Kilimanjaro", height: 5895, country: "Tanzania"},
      {name: "Everest", height: 8848, country: "Nepal"},
      {name: "Mount Fuji", height: 3776, country: "Japan"},
      {name: "Mont Blanc", height: 4808, country: "Italy/France"},
      {name: "Vaalserberg", height: 323, country: "Netherlands"},
      {name: "Denali", height: 6168, country: "United States"},
      {name: "Popocatepetl", height: 5465, country: "Mexico"}
    ];
    return MOUNTAINS;
  }

  componentDidMount() {
    this.setState({ data : this.getData()}, () => {
      console.table(this.state.data);
    });
  }


  render() {

    const { data } = this.state;
    return <T data={data} />;
  }
}

T.js

export default class T extends Component {
  constructor(props) {
    super(props);
    debugger;
    this.state = {
      data: props.data
    };
  }
  render() {
    return (
      <div>
        <ReactTable
          data={this.state.data}
          columns={[{
                  Header: "Name",
                  accessor: "name"
                },{
                  Header: "Height",
                  accessor: "height"
                },{
                  Header: "Country",
                  accessor: "country"
                }]}
          defaultPageSize={10}
          className="-striped -highlight"
        />
        <br />
      </div>
    );
  }
}

Answer 1

在T组件初始状态传递的空数组data:[]的初始渲染之外，似乎没有任何东西可以调用<App/>组件的渲染

T本身的状态在<T>的第一个渲染周期使用传递到<App/>的初始prop数据进行初始化。因为prop data最初是一个空数组（基于data: []中的初始状态字段<App/>），所以这将导致表显示为空。但是，没有任何东西可以触发<T>组件在第一次渲染之后进行更新（重新渲染），这是因为看到T将数据从其自身的内部状态传递到<ReactTable>（永远不会更新））。

请考虑修改render()组件的T方法，使其直接通过传递给<ReactTable/>的{{1}}道具而不是通过data呈现<T>内部状态，请执行以下操作：

export default class T extends Component {

  /*
  The changes below make this redundant

  constructor(props) {
    super(props);
    debugger;
    this.state = {
      data: props.data
    };
  }
  */

  render() {
    /* Extract data prop to local variable for subsequent use */
    const data = this.props.data;

    /* If no data prop has been provided, or is of unexpected type, 
       render a "no data" message instead. I've included this to
       illustrate this as a method to handle no or incorrect data 
       for the prop */
    if(!Array.isArray(data)) {
        return (<div>No data to display</div>)
    }

    /* Assume the data prop is of correct type, etc, so now render
    the <ReactTable> with data provided directly from prop rather
    than T's internal state */
    return (
      <div>
        <ReactTable
          data={data}
          columns={[{
                  Header: "Name",
                  accessor: "name"
                },{
                  Header: "Height",
                  accessor: "height"
                },{
                  Header: "Country",
                  accessor: "country"
                }]}
          defaultPageSize={10}
          className="-striped -highlight"
        />
        <br />
      </div>
    );
  }
}

Answer 2

添加componentDidMount和componentDidUpdate方法以更新表数据。

import React, { Component } from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";

export default class T extends Component {
  constructor(props) {
    super(props);
    debugger;
    this.state = {
      data: props.data
    };
  }

  componentDidMount() {
    this.setState({
      data: this.props.data,
    });
  }

  componentDidUpdate(prevProps){
    if (prevProps !== this.props) {
      this.setState({
        data: this.props.data,
      });
    }
  }

  render() {

    return (
      <div>
        <ReactTable
          data={this.state.data}
          columns={[{
                  Header: "Name",
                  accessor: "name"
                },{
                  Header: "Height",
                  accessor: "height"
                },{
                  Header: "Country",
                  accessor: "country"
                }]}
          defaultPageSize={10}
          className="-striped -highlight"
        />
        <br />
      </div>
    );
  }
}

在componentDidMount中更新状态属性未反映在react-table中

2 个答案: