使用 React 的简单待办事项列表，Array.filter 没有按预期工作？

Question

我正在尝试创建一个删除“已点击”任务的功能，但我不知道问题出在哪里。

我使用 useState 创建了一个数组，用于保存所有任务。
创建任务时分配给一个键 ( i )。
点击删除按钮时，触发 deleteTask 函数 ( i ) 参数.
DeleteTask 函数需要一个作为任务键的参数。
在我对数组进行过滤并询问的地方创建了一个新变量对于所有值都小于指定值的数组钥匙。 问题出在这里 返回相同的数组，但什么也没有被删除，因为我正在设置相同的数组

知道我做错了什么吗？

提前致谢！！

const { useState } = React;

function Todo() {

  const [item, setItem] = useState("");
  const [itemArray, setItemArray] = useState([]);

  function addItem() {
    setItemArray((prev) => {
      return [...prev, item];
    });
    setItem("");
  }

  function handleChange(event) {
    const { value } = event.target;
    setItem(value);
  }

  function deleteTask(key) {
    const newItemArray = itemArray.filter((task) => task.key != key);

    console.log(newItemArray);
    console.log(key);

    setItemArray(newItemArray);
  }

  return (
    <div className="container">
      <div className="heading">
        <h1>To-Do List</h1>
      </div>
      <div className="form">
        <input type="text" onChange={handleChange} value={item} />
        <button onClick={addItem}>Add</button>
      </div>
      <div>
        <ul>
          {itemArray.map((task, i) => {
            return (
              <li key={i}>
                {task}
                <button
                  key={i}
                  onClick={() => deleteTask(i)}
                  className="">Borrar
                </button>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );

}

ReactDOM.render(
  <Todo />,
  document.getElementById('react')
);

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

Answer 1

在 deleteTask 函数上过滤数组时，您正在寻找 key 属性。您应该将所选任务与当前元素的索引进行比较。

const newItemArray = itemArray.filter((task, index) => index != key);

Answer 2

添加item的时候，没有给item设置key，只是在state中添加string，过滤item的时候，key是undefiend

在下一行中，任务不包含键属性

const newItemArray = itemArray.filter((task) => task.key != key);

您需要在任务中存储密钥。

使用 React 的简单待办事项列表，Array.filter 没有按预期工作？

Simple To-Do List with React, Array.filter is not working as expected?

javascript

reactjs