无法在反应表中呈现动作按钮

问题描述

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

在我的实现中，当我尝试使用delete button时，效果很好。

但是当我通过调用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> ),}; }),}; }不会呈现。

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

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

Link to the static data example

API调用方法：

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

和此反应表组件

typescript

Link to my code in codeSandbox

解决方法

您需要每次在渲染时调用此convert方法。

选中此代码和框

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

您正在做的是在componentDidMount处设置渲染数据，但随后您使用的是从API调用返回的json。因此，您每次都需要调用此convert函数。

react-table reactjs reactjs