对象数组中的重复条目：Javascript

Question

我正在尝试将条目添加到数组中，这些条目是对应于表格行的对象。选择后，每一行都会用一种颜色突出显示。也可以使用 Ctrl 键选择多行。每次单击时，我都会将该行信息对象推送到数组中。它被定义为一个 SET，当多次单击同一行时，相同的条目被复制。此外，我无法取消选择已选择的选项。我将 react-table 用于数据网格的目的。有人可以帮我吗？非常感谢您的帮助。

沙盒：https://codesandbox.io/s/react-table-row-table-final-hor8j

import * as React from "react";
import ReactTable from "react-table";

export default class DataGrid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedRows: []
    };
  }

  rowClick = (state, rowInfo) => {
    if (rowInfo) {
      let selectedRows = new Set();
      return {
        onClick: e => {
          if (e.ctrlKey) {
            selectedRows = this.state.selectedRows;
            rowInfo._index = rowInfo.index;
            selectedRows.push(rowInfo);
            this.setState({
              selectedRows
            });
          } else {
            selectedRows = [];
            rowInfo._index = rowInfo.index;
            selectedRows.push(rowInfo);
          }
          this.setState(
            {
              selectedRows
            },
            () => {
              console.log("final values", this.state.selectedRows);
              this.props.rowClicked(this.state.selectedRows);
            }
          );
        },
        style: {
          background:
            this.state.selectedRows.some(e => e._index === rowInfo.index) &&
            "#9bdfff"
        }
      };
    } else {
      return "";
    }
  };

  render() {
    return (
      <ReactTable
        data={this.props.data}
        columns={this.props.columns}
        getTrProps={this.rowClick}
      />
    );
  }
}

Answer 1

您已将 selectedRows 定义为空 Set，但随后很快将其替换为数组 this.state.selectedRows。在此之后完成的每个操作都将在数组而不是集合上完成。

下面是一个示例，说明如何更改代码以使用集合：

const selectedRows = new Set(this.state.selectedRows); // Initialise the set with the items from your array. 
...
selectedRows.add(rowInfo); // Similar to an array push

您可以在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set 找到更多关于 JS 集如何工作的信息。

Answer 2

这是一个更新的沙盒以避免重复https://codesandbox.io/s/react-table-row-table-alternate-single-row-working-1itsy

解决方案包括在第二次点击时取消选择行。

编码愉快:)

Answer 3

这是一个使用功能组件和Set 管理选定行的简化演示。它允许选择和取消选择行。

可以使用类似的设置将此功能组件更改为扩展React.Component。

const App = ({data}) => {

  const [selected, setSelected] = React.useState(new Set());

  const handleClick = (row) => {
    const updatedSelected = new Set(selected);
    
    if (updatedSelected.has(row)) {
      updatedSelected.delete(row);
    } else {
      updatedSelected.add(row);
    }
    
    setSelected(updatedSelected);
  }
  
  React.useEffect(() => {
    console.log(Array.from(selected));
  });

  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
      {data.map(row => (
        <tr onClick={() => handleClick(row)} className={selected.has(row) && 'selected'}>
          <td>{row.id}</td>
          <td>{row.text}</td>
        </tr>
      ))}
      </tbody>
    </table>
  )
}

const data = [
  {id: 0, text: 0},
  {id: 1, text: 1},
  {id: 2, text: 2},
  {id: 3, text: 3},
  {id: 4, text: 4},
  {id: 5, text: 5},
  {id: 6, text: 6},
  {id: 7, text: 7},
  {id: 8, text: 8}
]


ReactDOM.render(<App data={data} />, document.getElementById('root'))

.selected {
  background-color: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>