显示react表中的数组数据

Question

我有一个数组和一个状态数组。

const [formData, setFormData] = useState([]);
let ure = [{}]

useEffect(() => {
axios
.get("/api/listUre")
.then((res) => {
console.log(res.data)
//setFormData(res.data);
ure.push({
class_id: res.data.class_id
})
})
.catch((error) => {
// Handle the errors here
console.log(error);
})
.finally(() => {
});
}, []);

一旦我这样做了，我现在想从表内访问class_id:

{ure.length > 0 &&
ure.map((obj, index) => {

<tr key={index}>
<td>
{obj.class_id}
</td>
<td>
{obj.class_id}
</td>
<td>
My Name
</td>
</tr>
})}
{ure.length === 0 && "No Data Found"}

我不确定我做错了什么，但它没有输出任何东西到页面。我知道ure数组中有数据，因为它没有将"No Data Found"输出到屏幕，所以它应该是工作的。有人能帮我吗?

Answer 1

我认为你需要ure是一块状态，否则你的ure数组将不断获得重新评估每次你的组件重新渲染。

所以，第一步应该是:

const [ure, setUre] = useState([]);

然后更改ure，只需这样做:

setUre(currUre => {
return currUre.concat([{ foo: bar }]);
})

然后，要遍历它，您不需要检查length > 0，只需检查map()就可以了。

你看到这个结果(没有表但没有空数组)的原因是你初始化了let ure = [{}]，它是一个大小为1的数组，里面有一个空对象。