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

【问题标题】：How to delete a row in a table using React?如何使用 React 删除表中的一行？
【发布时间】：2018-04-09 12:12:18
【问题描述】：

我有一个表格，它是 Material UI 中的一个表格组件。我从 API 获取数据，然后在表格中显示数据。该表根据从 Web 套接字接收的事件更新所有行。我的要求是，当 ID 为 10 的行的其中一个行值为 Closed 时，我想从表中删除该特定行。我使用数组存储来自 API 的数据，然后使用 map() 将它们呈现在单独的行中。

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

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

【问题讨论】：

标签： javascript reactjs html-table material-ui

【解决方案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;
        }, []);
}

【讨论】：