當我從數組中刪除一個項目時，如何將狀態更改為已刪除？

Question

當用戶將值添加到數組內的 object 時，狀態將更新為已添加。 當該值被刪除時，我正在嘗試做同樣的事情，以將狀態更新為已刪除。

const initialName = [
  {
    name: "",
    status: "",
  },
];

export default function changeNames(){

  const [name, setName] = useState([initialName ]);

  const handleAdd = () => {
    setName([...name, ""]);
  };
  const handleItemChanged = (event, index) => {
    const value = event.target.value;
    const list = [...name];

    list[index] = { name: value + "-" + id, status: "added" };
    setName(list);
  };
...
}

因此，當我添加一個輸入字段並鍵入名稱時，數組如下所示：

[{…}]
0:
name: "John-id"
status: "added"

當我從數組中刪除 John 時，我想要這樣的東西：

[{…}]
0:
name: "John-id"
status: "deleted"

這是刪除 function

  const handleRemoveClick = (index) => {
    const list = [...name];
    list.splice(index, 1);
    setName(list);
  };

    <div>
      {name.map((o, i) => {
        return (
          <tr key={"item-" + i}>
            <td>
              <div>
                <input
                  type="text"
                  value={o.item}
                  onChange={(event) => handleItemChanged(event, i)}
                  placeholder="Name it"
                />
              </div>
            </td>
            <td>
              <button type="button" onClick={handleRemoveClick}>
                Delete
              </button>
            </td>
          </tr>
        );
      })}
      <div>
        <button Click={handleAddClick}>
          Add Language
        </button>
      </div>
    </div>
  );

我怎樣才能讓它工作？

Answer 1

您需要更改“狀態”屬性，因為無法刪除項目並設置其屬性。

const handleRemoveClick = (event, index) => {
    const list = [...name];
    list[index].status = "deleted";
    setName(list);
};

稍后在渲染時，您必須在 map function 中執行檢查（不是很優雅），或者先過濾您的數組，然后再過濾 map：

// first, not elegant in my opinion
...    
{name.map(item => item.status !== "deleted" ? <div>item.name</div> : null)}
// second approach
...
{name.filter(item => item.status !== "deleted").map(item => <div>item.name</div>)}

Answer 2

我想這可能對你有幫助。謝謝

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

export default function App() {
   const [Name, setName] = useState([]);
   const [input, setInput] = useState({ name: "", status: "" });
   const handleItemChanged = (event, index) => {
     const { value } = event.target;
     setInput({ name: value + "-id", status: "added" });
   };
   const addHandler = () => {
     setName((prev) => {
       return [...prev, input];
     });
   };
   const removeHandler = (i) => {
     const arr = [...Name];
     arr[i].status = "deleted";
     setName(arr);
   };

   return (
     <div className="App">
       <input type="text" name="name" onChange={(e) =>
handleItemChanged(e)} />
       <button onClick={addHandler} style={{ margin: "1rem" }}>
         Add
       </button>
       <div>
         {Name &&
           Name.map((data, i) => {
             return (
               <div key={i}>
                 <h3>
                   {data.name} {data.status}
                   <button
                     style={{ margin: "1rem" }}
                     onClick={() => removeHandler(i)}
                   >
                     Delete
                   </button>
                 </h3>
               </div>
             );
           })}
       </div>
     </div>
   );
}