我无法删除用 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

问题

您正在将点击事件传递给 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 转换为柯里化函数，并 enclose/close 覆盖特定待办事项的索引值。返回一个函数作为 onClick 回调。

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

...

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

Answer 2

试试这个！这应该有效

项目没有任何 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>
 );
}

Answer 3

试试这个删除功能：

const deleteItem = (ind) => {
 const newDeleteData =[...items];
 newDeleteData.splice(ind,1);
 setItems(newDeleteData);
 };

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

I am not able to delete items in my todo list made with react, please help me with error in my code

frameworks

web-development-server

reactjs

react-hooks

eslint-plugin-react-hooks

问题

解决方案