如何将操作按钮添加到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]);
@H_404_7@
这很好用，但是现在我想添加操作按钮（编辑，删除），所以我添加了
  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]);
@H_404_7@
上面的代码只能运行一次，我想不出解决方案。似乎发生这种情况是因为我将其置于if的{​​{1}}条件下，所以它无法更新或不正确知道useEffect，因此下次调用它时，它是调出原始值，而不是更新的值。如果删除setoriData条件，则会添加多个操作行，并且会显示错误消息。



解决方法
 
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
 
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
 
小编邮箱:dio#foxmail.com (将#修改为@）