我的反应表未填充数据

Question

我正在使用React-table-6包的简单表上工作。它是一个类组件，在该类组件中，我保持状态并执行componentDidMount和setState。

尽管我从axios呼叫中获取响应，但我的表没有填充数据。它还显示了错误resolvedData.map不是一个函数，当我注释掉setState时出错。这是我的代码。

import React from "react";
import axios from "../bin/api/config";
import ReactTable from "react-table-6";
import "react-table-6/react-table.css";
export default class ReactTableComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      users: []
    };
  }

  componentDidMount() {
    console.log("hello");
    axios
      .get("/admin/users", {
        headers: { Authorization: localStorage.getItem("authToken") }
      })
      .then(response => {
        console.log("response", response);
        const users = response.data;
        this.setState({ users });
      })
      .catch(err => {
        console.log(err);
      });
  }

  render() {
    const columns = [
      {
        Header: "Email",
        accessor: "email"
      },
      {
        Header: "Phone No",
        accessor: "phone"
      },
      {
        Header: "First Name",
        accessor: "firstname"
      },
      {
        Header: "Second Name",
        accessor: "lastname"
      },
      {
        Header: "Street",
        accessor: "street"
      },
      {
        Header: "Zip",
        accessor: "zip"
      },
      {
        Header: "City",
        accessor: "city"
      }
    ];
    return <ReactTable columns={columns} data={this.state.users} filterable />;
  }
}

Answer 1

您必须在user属性中设置状态数据，但是当前未设置它的属性。

尝试一下

import React from 'react';
import axios from '../bin/api/config';
import ReactTable from 'react-table-6';
import 'react-table-6/react-table.css';
export default class ReactTableComponent extends React.Component {
    constructor() {
        super()
        this.state = {
            users: []
        }
    }
    componentDidMount() {
        console.log("hello")
        axios.get("/admin/users",
            {
                headers: { 'Authorization': localStorage.getItem('authToken') }
            })
            .then((response) => {
                console.log("response", response)
                const users = response.data
                this.setState(() => {
                    return {
                        users: users
                    }
                })
            })
            .catch((err) => {
                console.log(err);
            })
    }
    render() {
        const columns = [
            {
                Header: "Email",
                accessor: "email"
            },
            {
                Header: "Phone No",
                accessor: "phone"
            },
            {
                Header: "First Name",
                accessor: "firstname"
            },
            {
                Header: "Second Name",
                accessor: "lastname"
            },
            {
                Header: "Street",
                accessor: "street"
            },
            {
                Header: "Zip",
                accessor: "zip"
            },
            {
                Header: "City",
                accessor: "city"
            }
        ]
        return (
            <ReactTable
                columns={columns}
                data={this.state.users}
                filterable
            >
            </ReactTable>
        )
    }
}