Question

我有一个表，它是Material UI中的Table组件。我从API获取数据，然后在表中显示数据。该表根据从Web套接字接收的事件更新所有行。我的要求是，当一行说ID 10时，其行值之一为已关闭，我想从表中删除该特定行。我使用数组来存储来自API的数据，然后使用map（）在各行中呈现它们。

    mapTableData = (TableData) => {
const newTableData = tempTableData.map((item, index) => ({
  ...item,
  Column1: () =>
    <p>
      {item.parameter1}
    </p>,
  Column2: () =>
   ........

当一个事件到达Web套接字并且{item.parameter1}的值更改为“已关闭”时，我想从表中删除该特定行。怎么实现这个？我尝试对每一列使用条件检查，但它只给了我一个空行并且不会删除它。

Answer 1

您可以使用filter来迭代项目两次：

const render = (tableData) => {
    return tableData
        .filter(row => row.id !== 10)
        .map(row => {
            // render logic
        })
}

或者，更有效率，使用reduce：

const render = (tableData) => {
    return tableData
        .reduce((aggr, row) => {
            if (row.id !== 10) {
                const jsx = ''; // some logic
                aggr.push(jsx);
            }

            return aggr;
        }, []);
}

如何使用React删除表中的行？

1 个答案: