javascript - 使用钩子(Hook) reactjs 动态添加/删除旧行

Question

我正在学习将钩子(Hook)与 React 结合使用，并尝试制作一个简单的网站，您可以在其中写入 2 个值并将它们添加到列表中。列表中的每个项目都有一个删除按钮。

出于某种原因，当我添加超过 2 行时，问题似乎开始了。例如，如果我添加 2 行，并在开始时加载的旧行上按删除 - 它要么删除它们，要么用与新行相同的值替换它们。

不确定我在这里做错了什么，因为删除一直有效，直到我在开始时直接添加超过 +2 行。

有点难以解释，但我做了一个沙盒，可以更容易地看到问题。

删除&添加函数:

  const deleteRow = async (index, e) => {
    var data = testArr;
    data.splice(index, 1);

    setTestArr([...data]);
  };

  const addRow = async e => {
    var obj = {
      id: 1,
      start: inputFrom,
      stop: inputTo
    };

    var data = testArr;
    data.push(obj);

    setTestArr([...data]);
  };

映射函数:

{testArr.map((item, index) => (
        <div key={item.id} className="col-12">
          <div className="control-group mb-1">
            <span className="mr-2">
              {item.start} - {item.stop}
            </span>
            <input
              type="button"
              className="btn btn-light"
              value="Delete row"
              onClick={e => deleteRow(index, e)}
            />
          </div>
        </div>
      ))}

沙盒:

Answer 1

首先，您可能不使用 var 关键字，而是使用 ES const || let，确保您不会因为 JS 提升而遇到意外的副作用，

第二 -

var data = testArr;
data.splice(index, 1);

是非法移动，因为 data 在内存中与状态没有不同的地方，它只是它上面的一个指针，因此你在 setState 之外修改状态

第一个选项是浅拷贝状态

let data = [...testArr];

或者直接实现setState里面的逻辑

// delete
setTestArr(prev => prev.filter((item, i) => i != index ));
// add
setTestArr(prev => [...prev, obj]);