React：React-table 不渲染数据多个不同的状态变量

Question

我正在使用这个 react-table component library。我有一个 data 状态变量，其中包含三个状态变量，我正在进行三个 API 调用以获取所有三个状态变量的数据。然后，在 JSX 中，我正在解构 response.data 并将其传递到 react-table component 的 data 中。但是，它不起作用。

我的反应代码-table 组件：

import React, { Component } from "react";
// react component for creating dynamic tables
import ReactTable from "react-table";

import axios from "axios";
import {
  Card,
  CardBody,
  CardHeader,
  CardTitle,
  Row,
  Col,
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
} from "reactstrap";

class DataViewTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {
        system: [],
        measurements: [],
        measurementData: [],
      },
      isLoading: false,
      dropdownOpen: false,
    };
  }

  signal = axios.CancelToken.source();

  componentDidMount() {
    this.handleGetSystemInfo();
    this.handleGetMeasurementsInfo();
    this.handleGetMeasurementDataInfo();
    this.addFilterPlaceholder();
  }

  componentUnMount() {
    this.signal.cancel("Api is being canceled");
  }
  handleGetSystemInfo = async () => {
    this.setState({ isLoading: true });
    await axios
      .get("http://www.mocky.io/v2/5ed488f83300005f00f7a20e")
      .then((response) => {
        // handle success
        console.log("system:", response.data);
        this.setState({ system: response.data });
      })
      .catch((error) => {
        // handle error
        if (axios.isCancel(error)) {
          console.log("Unable to fetch system data", error.message);
        } else {
          this.setState({ isLoading: false });
        }
      });
  };
  handleGetMeasurementsInfo = async () => {
    this.setState({ isLoading: true });
    await axios
      .get("http://www.mocky.io/v2/5ed4899d3300003f00f7a212")
      .then((response) => {
        // handle success
        console.log("measurements:", response.data);
        this.setState({ measurements: response.data });
      })
      .catch((error) => {
        // handle error
        if (axios.isCancel(error)) {
          console.log("Unable to fetch measurements info", error.message);
        } else {
          this.setState({ isLoading: false });
        }
      });
  };
  handleGetMeasurementDataInfo = async () => {
    this.setState({ isLoading: true });
    await axios
      .get("http://www.mocky.io/v2/5ed48a113300007900f7a213")
      .then((response) => {
        // handle success
        console.log("measurement data:", response.data);
        this.setState({ measurementData: response.data });
      })
      .catch((error) => {
        // handle error
        if (axios.isCancel(error)) {
          console.log("Unable to fetch measurementData", error.message);
        } else {
          this.setState({ isLoading: false });
        }
      });
  };

  addFilterPlaceholder = () => {
    const filters = document.querySelectorAll("div.rt-th > input");
    for (let filter of filters) {
      filter.placeholder = "Search..";
    }
  };

  toggleDropdown = () => {
    this.setState((state) => {
      return {
        dropdownOpen: !state.dropdownOpen,
      };
    });
  };

  render() {
    const { dropdownOpen } = this.state;
    const { system, measurementData, measurements } = this.state.data;
    return (
      <>
        <div className="content">
          <Row className="mt-5">
            <Col xs={12} md={12}>
              <Card>
                <CardHeader>
                  <CardTitle tag="h4">Table of data</CardTitle>
                  <hr />
                  <Dropdown
                    isOpen={dropdownOpen}
                    toggle={this.toggleDropdown}
                    className="shipsDropdown"
                  >
                    <DropdownToggle caret>Ships</DropdownToggle>
                    <DropdownMenu>
                      <DropdownItem>Foo Action</DropdownItem>
                      <DropdownItem divider />
                      <DropdownItem>Bar Action</DropdownItem>
                      <DropdownItem divider />
                      <DropdownItem>Quo Action</DropdownItem>
                    </DropdownMenu>
                  </Dropdown>
                </CardHeader>
                <CardBody>
                  <ReactTable
                    data={(system, measurements, measurementData)}
                    filterable
                    resizable={false}
                    columns={[
                      {
                        Header: "System",
                        accessor: "name",
                      },
                      {
                        Header: "Measurement",
                        accessor: "name",
                      },
                      {
                        Header: "Value",
                        accessor: "values.temp1, values.temp2",
                      },
                      {
                        Header: "Min",
                        accessor: "",
                      },
                      {
                        Header: "Max",
                        accessor: "",
                      },
                      {
                        Header: "Avg",
                        accessor: "",
                      },
                      {
                        Header: "Last",
                        accessor: "",
                      },
                      {
                        Header: "Bar",
                        accessor: "",
                      },
                    ]}
                    showPaginationTop
                    showPaginationBottom={false}
                    className="-striped -highlight"
                  />
                </CardBody>
              </Card>
            </Col>
          </Row>
        </div>
      </>
    );
  }
}

export default DataViewTable;

Adding CodeSandbox link

Answer 1

这里有很多事情需要正确处理

您直接将状态设置为测量数据、测量和系统，而不是在 axios 请求中的数据下，因此您必须直接使用它们

 constructor(props) {
    super(props);
    this.state = {
        system: [],
        measurements: [],
        measurementData: [],
      ...
    };
  }

您没有将 cancelToken 传递给 axios 请求。单独调用也必须使用单独的 cancelToken

this.signalToken = axios.CancelToken.source();
await axios
      .get("http://www.mocky.io/v2/5ed48a113300007900f7a213", {
         cancelToken: this.signalToken.token
      })

其他请求依此类推，取消请求如

this.signalToken.cancel();
this.measurementsToken.cancel()
this.measurementsDataToken.cancel()

ReactTable的数据如果格式相同，应该是一个合并资源数组。但是它们有不同的格式，你应该考虑渲染多个 ReactTables

<ReactTable
    data={[...system, ...measurements, ...measurementData]}
    filterable
    resizable={false}

React：React-table 不渲染数据多个不同的状态变量

React: React-table not rendering data multiple different state variables

destructuring

reactjs

react-table