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

问题描述

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

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>
  );
}

解决方法

问题

您正在将点击事件传递给 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 键。由于您在项目元素上没有 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 转换为柯里化函数并封闭/关闭特定待办事项的索引值。返回一个函数作为 onClick 回调。

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

...

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

,

试试这个！ 这应该有效

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>
 );
}