如何解决如何将操作按钮添加到React表中从API返回的列值?
我正在使用react-table
来创建表,并且正在通过api这样的循环从api生成列值
useEffect(() => {
// columnHeaders has an array which has column values from api
columnHeaders.map((column) => {
return setHeaders((prev) => {
return [
...prev,{
Header: column,accessor: column,hidden: column.toLowerCase() === "asset_id" ? true : undefined,},];
});
});
},[columnHeaders]);
这很好用,但是现在我想添加操作按钮(编辑,删除),所以我添加了
useEffect(() => {
// to add action button to the last column by calling setState (setHeader) again
if (headers.length === columnHeaders.length) {
return setHeaders((prev) => {
return [
...prev,{
Header: "Actions",id: "delete",Cell: (tableProps) => {
return (
<span
style={{
cursor: "pointer",color: "#353535",textdecoration: "underline",marginRight: "10px",}}
// delete feature is working only once
onClick={() => {
// oriData doesnt have updated data when I clicked again
const datacopy = [...oriData];
// delete row
datacopy.splice(tableProps.row.index,1);
// update original data
setoriData(datacopy);
}}
>
<Tooltip title="Delete Row">
<DeleteButton aria-label="delete">
<DeleteIcon fontSize="small" />
</DeleteButton>
</Tooltip>
</span>
);
},];
});
}
},[headers,oriData,columnHeaders.length]);
上面的代码只能运行一次,我想不出解决方案。似乎发生这种情况是因为我将其置于if
的{{1}}条件下,所以它无法更新或不正确知道useEffect
,因此下次调用它时,它是调出原始值,而不是更新的值。如果删除setoriData
条件,则会添加多个操作行,并且会显示错误消息。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。