reactjs - react-bootstrap-table2 和钩子状态奇怪的行为

Question

我的问题是，当我尝试删除数据源中的对象时，出现严重错误，删除的项目再次出现......

当我从位置一开始按顺序删除它们时，没有任何问题，但是当我开始删除中间某处的项目时，它会出错。

我用扩展运算符定义了以下状态对象，包括 3 个对象

 const [ticketfield, setTicketfield] = useState([
    {
      id: uuidv4(),
      active: "true",
      fieldName: "name",
      label: "Full Name",
      maxChar: "60"

    }
    ,
    {
      id: uuidv4(),
      active: "true",
      fieldName: "e-mail",
      label: "E-mail address",
      maxChar: "60"
    }
    ,
    {
      id: uuidv4(),
      active: "true",
      fieldName: "dateOfBirth",
      label: "Date of Birth",
      maxChar: "10"
    }
]

然后我创建了一个删除处理程序

 const handleDeleteRow = (row) => {
    const ticketfieldNew = [...ticketfield]
    setTicketfield(ticketfieldNew.filter(field => field.id !== row.id));
  };

在列配置中，我使用格式化程序向上面的处理程序添加了一个带有带有 onclick 引用的按钮的操作列。

// other colums
{
     
      text: "Actions",
      formatter: (cell, row, enumObject, rowIndex) => {
        return (<Button onClick={() => handleDeleteRow(row)}>Delete</Button >)
      },
      sort: true,

      headerStyle: {
        backgroundColor: "#e7e7e7",
      },
    }
Setup the table in jsx
<ToolkitProvider
                  keyField="id"
                  data={ticketfield}
                  columns={columnsForTicketFields}
                  cellEdit={cellEditFactory({ mode: "click" })}
                >
                  {(props) => (
                    <div>
                      <BootstrapTable
                        {...props.baseProps}
                        cellEdit={cellEditFactory({ mode: "dbclick" })}
                        rowEvents={rowEvents}
                        pagination={paginationFactory()}
                      />
                    </div>
                  )}
                </ToolkitProvider>

有人知道这里出了什么问题吗？

标签： reactjs