javascript - 根据组件调用次数从现有数组构建新数组

Question

背景故事

注意:这个问题是对答案 T.J. Crowder 的扩展提供here .

我对此进行了扩展，创建了一个状态来保存行数组，这样我就可以使用 setState 更新数组(从中删除) .

我添加了一个 handleClick函数来处理我希望用户能够根据被单击元素的索引对数组执行的操作。 (目前所包含的只是右键单击从数组中删除目标索引。

/rowList.js

import React, { Component } from "react";
import Row0 from "./../rows/row0";
import Row1 from "./../rows/row1";
import Row2 from "./../rows/row2";
import Row3 from "./../rows/row3";

const row0 = () => <Row0 />;
const row1 = () => <Row1 />;
const row2 = () => <Row2 />;
const row3 = () => <Row3 />;
class RowInfo {
  static id = 0;
  constructor(Comp) {
    this.Comp = Comp;
    this.id = RowInfo.id++;
  }
}
class RowList extends Component {
  constructor() {
    super();
    this.state = {
      rows: [
        new RowInfo(row0),
        new RowInfo(row1),
        new RowInfo(row2),
        new RowInfo(row3)
      ]
    };
  }
  handleClick = (a, b) => e => {
    e.preventDefault();
    if (e.nativeEvent.which === 1) {
      //left click
      console.log(a); //for testing
      console.log(b); //for testing
    } else if (e.nativeEvent.which === 3) {
      //right click
      this.setState({
        rows: this.state.rows.filter((_, i) => i !== a)
      });
    }
  };

  render() {
    return (
      <>
        {this.state.rows.map(({ id, Comp }) => (
          <tr
            key={id}
            onClick={this.handleClick(id)}
            onContextMenu={this.handleClick(id)}
          >
            <Comp />
          </tr>
        ))}
      </>
    );
  }
}
export default RowList;

然后我测试调用 <RowList />组件两次，以便我可以测试跨两个组件删除行。

注意:Mod0 被导入到 /main.js 中导入到 /index.js 的文件呈现给 <div id="root"></div>在index.html

/mod0.js

import React, { Component } from "react";
import RowList from "./../rows/rowList";
class Mod0 extends Component {
  render() {
    return (
      <>
        <table>
          <tbody>
            <RowList />
          </tbody>
        </table>
        <table>
          <tbody>
            <RowList />
          </tbody>
        </table>
      </>
    );
  }
}

问题

在测试删除时，我意识到一个关键错误，我目前的知识只能使我相对确定其性质，因此我的解释可能不准确/有缺陷。看来我只能从 <RowList /> 中呈现的前 4 行中删除因为后 4 行不对应于 this.state.rows 中的数组.

我认为解决方案是根据原来的状态数组和次数来构建一个新的数组<RowList />叫做。而是渲染那个数组。

也许我可以更新状态，开始时看起来像这样:

constructor() {
    super();
    this.state = {
      rows: [
        new RowInfo(row0),
        new RowInfo(row1),
        new RowInfo(row2),
        new RowInfo(row3)
      ],
      rendRows: this.rendRowsTemp
    };
    this.rendRowsTemp = []; //push to build a new array into here?
  }

然后像这样使用新数组:

  render() {
    return (
      <>
        {this.state.newRows.map(({ id, Comp }) => (
          <tr
            key={id}
            onClick={this.handleClick(id)}
            onContextMenu={this.handleClick(id)}
          >
            <Comp />
          </tr>
        ))}
      </>
    );
  }

预期结果

我需要一个方法来根据原始状态数组和次数构建新数组<RowList />被称为。

Answer 1

我认为问题是在过滤器的条件下 (this.state.rows.filter((_, i) => i !== a)) 你正在使用 RowInfo 的索引在数组中不是它的 ID，尝试:this.state.rows.filter(({ id }) => id !== a)