我有这个 React 设置,我定义了一个名为 ApiTable
的钩子(Hook),并有一个 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>
)
};
最佳答案
您正确获取数据,但将数据设置为错误的状态。
此外,当您迭代 data
数组时,您每次都会从 data
数组中打印 table head
,这是错误的 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>
)
}
关于javascript - 使用React-Hooks/Axios获取数据并显示在表格中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56896037/