我無法刪除使用 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轉換為deleteItem函數並封閉/關閉特定 todo 的索引值。 返回一個函數作為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>
 );
}