React-Table 不呈现数据

Question

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

设置列：

    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")
      })

状态和“帖子”列表存储处于底部状态的帖子（带有虚拟数据）：

state = {
    title: "Choose an Endpoint",
    activeOrg: "Orginisation",
    isExpanded: false,
    activeLink: 0,
    authLink:'',
    response: '',
    post: '',
    responseToPost: '',
    show: false,
    modalContent:"",
    token:'',
    verifier:'',
    org:'',
    orginisations: [
      { id: 1, name: "ANU"},
      { id: 2, name: "Bar"},
      { id: 3, name: "FANG"},
      { id: 4, name: "Atlassian"}
    ],
    list: [
      { id: 1, name: "Employees" },
      { id: 2, name: "Leave Applications" },
      { id: 3, name: "Pay Items" },
      { id: 4, name: "Payroll Calendars" },
      { id: 5, name: "Pay Runs" },
      { id: 6, name: "Pay Slips" },
      { id: 7, name: "Settings" },
      { id: 8, name: "Superfund Products" },
      { id: 9, name: "Timesheets" }
    ],
    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",
      }
    ],
    posts: [
      {"EmployeeID":"63c571b3-bff0-4ce1-94f7-255c235580fa","FirstName":"Clive","LastName":"Thomas","Status":"ACTIVE","DateOfBirth":"/Date(697248000000+0000)/","Gender":"M","UpdatedDateUTC":"/Date(1533706298000+0000)/"}
    ]
  }

渲染函数：

render() {
    let myClass=""
    let EndpointList = (
      <div>
        {this.state.list.map((i) => {
          i.id === this.state.activeLink ? myClass="endpoint activeLink" : myClass="endpoint"
          return <Endpoint 
            key={i.id}
            name={i.name}
            myClass={myClass}
            clicked={(event) => this.handleClickEndpoint(i, i.id)}/>
        })}
        </div>
    );
    let orgContainer = ""
    this.state.isExpanded ? orgContainer="orgItem expanded" : orgContainer="orgItem notExpanded"
    let OrgList = (
      <div className={orgContainer}>
        {this.state.orginisations.map((o) => {
          return <Orginisation
            key={o.id}
            name={o.name}
            clicked={(event) => this.handleClickOrg(o,o.id)}
          ></Orginisation>
        })}
      </div>
    );
    var activeContent=<ReactTable columns={this.state.columns} data={this.state.posts} noDataText={"Loading..."}></ReactTable>
    // const columns = Object.keys(this.state.data[0]).map((key, id)=>{
    //   console.log(key)
    //   return {
    //     Header: key,
    //     accessor: key,
    //   }
    // })
    return (
      <Router>
        <Route path='/' exact render={
          () => {
            return (
              <div className='authenticateContainer'>

                <a href={this.state.authLink} className='fill-div'>Click to Auntheticate</a> 
              </div>
            )
          }
        }/>
        <Route path='/home' render={
          () => {
            return (
              <div>
                <div className='sideBar'>
                  <div className='logoHolder'>
                    <img className='logo' alt='Logo' src={'./Assets/logo.png'}></img>
                  </div>
                  {EndpointList}
                  {OrgList}
                  <div style={{}} className="org button" onClick={this.expandOrg}>
                    <img className="orgLogo" alt='Logo' src={'./Assets/orgLogo.png'}></img>
                    {this.state.activeOrg}
                  </div>
                </div>
                <div className="container" id={this.state.title}>
                  {/* <button onClick={() => { this.setCredentials() }}>CLICK ME</button> */}
                  <div className="contentContainer">
                    <div className="head">
                      {this.state.title}
                    </div>
                    {activeContent}
                  </div>
                </div>
              </div>
            )
          }
        } />

      </Router> 
    );
  }
}

实例化反应表（也在上面的渲染函数中）：

var activeContent=<ReactTable columns={this.state.columns} data={this.state.posts} noDataText={"Loading..."}></ReactTable>

我还打印了成功插入列表的虚拟数据以及未插入的 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]？那将是第二条记录。