使用React-Hooks / Axios来获取数据并显示在表格中

Question

我有这个React设置，我定义了一个名为ApiTable的钩子，并有一个renderTable方法。 我正在尝试从api端点https://jsonplaceholder.typicode.com/users获取数据，并将其返回到具有适当类别的表中。

现在，它会将所有列都压缩到左侧，如此处所示。 当前，数据未显示，并被压缩到左侧。 我很确定我的表数据设置错误。

另外，我不确定axios请求是否应该在useEffect内。

https://imgur.com/a/Up4a56v

 const ApiTable = () => { const url = 'https://jsonplaceholder.typicode.com/users'; const [data, setData] = useState([]); useEffect(() => { setData([data]); axios.get(url) .then(json => console.log(json)) }, []); const renderTable = () => { return data.map((user) => { const { name, email, address, company } = user; return ( <div> <thead> <tr> <th>Name</th> <th>Email</th> <th>Address</th> <th>Company</th> </tr> </thead> <tbody> <tr> <td>name</td> <td>email</td> <td>address</td> <td>company</td> </tr> </tbody> </div> ) }) } return ( <div> <h1 id='title'>API Table</h1> <Table id='users'> {renderTable()} </Table> </div> ) }; 

Answer 1

您正在正确获取数据，但是将数据设置为错误状态。

同样，当您迭代data数组时，每次都会打印table head ，这是错误的，并且您的data数组address和company都是对象，因此您无法直接打印对象。

你需要这样做

const App = () => {
  const url = 'https://jsonplaceholder.typicode.com/users'

  const [data, setData] = useState([])

  useEffect(() => {
    axios.get(url).then(json => setData(json.data))
  }, [])

  const renderTable = () => {
    return data.map(user => {
      return (
        <tr>
          <td>{user.name}</td>
          <td>{user.email}</td>
          <td>{user.address.street}</td> //only street name shown, if you need to show complete address then you need to iterate over `user.address` object
          <td>{user.company.name}</td> //only company name shown, if you need to show complete company name then you need to iterate over `user.name` object
        </tr>
      )
    })
  }

  return (
    <div>
      <h1 id="title">API Table</h1>
      <table id="users"> //Your Table in post changed to table to make it work
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Address</th>
            <th>Company</th>
          </tr>
        </thead>
        <tbody>{renderTable()}</tbody>
      </table>
    </div>
  )
}

演示