reactjs - 我无法删除使用 react 制作的待办事项列表中的项目，请帮助我解决代码中的错误

Question

以下是我的待办事项列表代码，我无法在删除项目功能中删除列表中的项目，请帮助我解决错误。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [inputList, setInputList] = useState("");
  const [items, setItems] = useState([]);
  const change1 = (e) => {
    setInputList(e.target.value);
  };
  const change2 = () => {
    setItems((oldItems) => {
      return [...oldItems, inputList];
    });
    setInputList("");
  };
  const deleteItem = (ind) => {
    return setItems(items.filter((item)=>{return item.ind!==ind}))
  }
  return (
    <div className="App">
      <div className="inner_div">
        <h1 style={{ borderBottom: "2px solid black" }}>ToDo List</h1>
        <input type="text" onChange={change1} value={inputList} />
        &nbsp;&nbsp;
        <button onClick={change2}>+</button>
        <ol style={{ listStyle: "none" }}>
          {items.map((itemval, ind) => {
            return (
              <div style={{ display: "flex" }}>
                <button onClick={deleteItem}>-</button>&nbsp;
                <li id={ind}>{itemval}</li>
              </div>
            );
          })}
        </ol>
      </div>
    </div>
  );
}

Answer 1

问题

您正在将 click 事件传递给deleteItem处理程序。

const deleteItem = (ind) => { // <-- click event object!
  return setItems(items.filter((item)=>{return item.ind!==ind}))
}

...

<button onClick={deleteItem}>-</button>

您的过滤器功能也存在问题，您正在将索引与项目的属性进行比较，并且此条件几乎总是为假并清除items数组。

(item)=>{return item.ind!==ind}) // item.ind is undefined

解决方案

修复deleteItem处理程序以正确比较索引。

const deleteItem = (index) => {
  setItems(items => items.filter((item, i)=> i !== index));
}

您需要将映射索引值传递给回调。不要忘记为映射的元素添加一个唯一的 React 键。由于您在 item 元素上没有 GUID，因此数组索引现在必须要做。

{items.map((itemval, index) => {
  return (
    <div key={ind} style={{ display: "flex" }}>
      <button onClick={() => deleteItem(index)}>-</button>&nbsp;
      <li id={index}>{itemval}</li>
    </div>
  );
})}

如果您想避免按钮onClick处理程序中的匿名函数，您可以转换deleteItem为柯里化函数并封闭/关闭特定的 todo 的索引值。返回一个函数作为onClick回调。

const deleteItem = (index) => () => {
  setItems(items => items.filter((item, i)=> i !== index));
}

...

<button onClick={deleteItem(index)}>-</button>

Answer 2

尝试这个！这应该工作

Items 没有任何 ind 属性。索引是过滤器的第二个参数，必须在过滤器中使用才能删除，并且必须在函数deleteItem(ind)中传递索引。

 import React, { useState } from "react";
 import "./styles.css";

  export default function App() {
   const [inputList, setInputList] = useState("");
   const [items, setItems] = useState([]);
   const change1 = (e) => {
   setInputList(e.target.value);
 };
 const change2 = () => {
 setItems((oldItems) => {
  return [...oldItems, inputList];
 });
 setInputList("");
};
const deleteItem = (ind) => {
return setItems(
  items.filter((item, i) => {
    return i !== ind;
   })
  );
 };
  return (
   <div className="App">
   <div className="inner_div">
    <h1 style={{ borderBottom: "2px solid black" }}>ToDo List</h1>
    <input type="text" onChange={change1} value={inputList} />
    &nbsp;&nbsp;
    <button onClick={change2}>+</button>
    <ol style={{ listStyle: "none" }}>
      {items.map((itemval, ind) => {
        return (
          <div style={{ display: "flex" }}>
            <button onClick={() => deleteItem(ind)}>-</button>&nbsp;
            <li id={ind}>{itemval}</li>
          </div>
        );
      })}
    </ol>
  </div>
</div>
 );
}