Question

我正在尝试在反应表组件中呈现一些数据，但是数据不会加载。我已经测试了完全相同格式的伪数据，并且工作正常。但是，当我进行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")
      })

状态和“帖子”列表将处于底部状态的帖子（带有伪数据）存储在其中：

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]？那将是第二条记录。

React-Table无法呈现数据

2 个答案: