React-Table 不渲染数据

Question

我正在尝试在 react-table 组件中呈现一些数据，但是数据没有加载。我已经用完全相同格式的虚拟数据进行了测试，它工作正常。但是，当我进行 API 调用并获取相同格式的数据并将其推送到我传递给 react-table 的数据列表时，该表不会呈现它。请帮我找出问题所在。干杯

设置列：

    columns: [

      {

        Header: "Employee ID",

        accessor: "EmployeeID"

      },

      {

        Header: "First Name",

        accessor: "FirstName"

      },

      {

        Header: "Last Name",

        accessor: "LastName"

      },

      {

        Header: "Date of Birth",

        accessor: "DateOfBirth",

      },

      {

        Header: "Status",

        accessor: "Status",

      },

      {

        Header: "Gender",

        accessor: "Gender",

      },

      {

        Header: "UpdatedDateUTC",

        accessor: "UpdatedDateUTC",

      }

    ]

数据是什么样的：

{"EmployeeID":"63c571b3-bff0-4ce1-94f7-255c235580fa","FirstName":"Clive","LastName":"Thomas","Status":"ACTIVE","DateOfBirth":"/Date(697248000000+0000)/","Gender":"M","UpdatedDateUTC":"/Date(1533706298000+0000)/"}

我的 API 调用以及我如何将数据项保存到状态。（我控制台记录了我获得的数据的值，并且格式正确）

fetch('http://localhost:3100/employees')

      .then((resp) => {

        return resp.json()

      })

      .then((data) => {

        let temp = this.state.posts;

        temp.push(data.Employees[1])

        this.setState({posts: temp})

        console.log(this.state.posts)

      })

      .catch((error) => {

        console.log(error, "catch the hoop")

      })

我还打印了成功插入列表的虚拟数据以及未插入的 API 数据。如您所见，它们显然是相同的：

Answer 1

不确定这是否会解决您的问题，但 IMO 您应该将其重构为fetch('http://localhost:3100/employees')      .then((resp) => {        return resp.json()      })      .then((data) => {        let temp = [...this.state.posts]        temp.push(data.Employees[1])        this.setState({            posts: temp,            data: data        })        console.log(this.state.posts) //this will not have the newest values yet, setState is async      })      .catch((error) => {        console.log(error, "catch the hoop")      })对反应状态执行操作不是一个好习惯

Answer 2

你为什么要推动员工[1]？那将是第二个记录。