我有这个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>
)
};
答案 0 :(得分: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>
)
}