无法在反应中呈现操作按钮 table

Question

我有 react-table，这是一个简单的 CRUD 应用程序。每行都有一个删除按钮来删除该记录。

在我使用 static data 尝试实现时，它工作正常。

但是当我通过调用 API 来实现时，delete button 不会呈现。

我基本上是动态创建一个删除按钮并对其执行操作。

问题是，下面的实现适用于静态数据，但不适用于动态数据（来自 api 的数据）

API调用方法：

const AdminAPInfo = [];
    this.state = {
      apiInfo: AdminAPInfo.map((prop, uuid) => {
        return {
          id: uuid,
          name: prop[0],
          actions: (
            <div className="actions-right">
              <Button
                fill="true"
                onClick={() => {
                  var data = this.state.data;
                  data.find((o, i) => {
                    if (o.id === uuid) {
                     data.splice(i, 1);
                      console.log(data);
                      console.log(i);
                      return true;
                    }
                    return false;
                  });
                  this.setState({
                    data: data,
                  });
                }}
                color="danger"
                size="sm"
                className="btn-icon btn-link remove"
                id="tooltip974171201"
              >
                <i className="fa fa-times" />
              </Button>
            </div>
          ),
        };
      }),
    };
  }

和这个 react-table 组件

<ReactTable
   data={apiInfo}
    columns={[
       {
        Header: "API Name",
          accessor: "name",
        },
        {
     Header: "Actions",
       accessor: "actions",
         sortable: false,
         ilterable: false,
        },
      ]}

Link to my code in codeSandbox

Answer 1

每次render时都需要调用这个convert方法

检查这个代码和框

https://codesandbox.io/s/gracious-cloud-9xwx8

您所做的是将渲染数据设置为 componentDidMount，但随后您使用的是从 API 调用返回的 json。所以你每次都需要调用这个转换函数。

无法在反应中呈现操作按钮 table

Unable to render actions buttons in a react table

reactjs

react-table