React hooks - 編輯后更新列表中的項目

Question

我是 React Hooks 的新手。 我正在嘗試制作一個帶有添加、編輯、刪除功能的小型 crud 應用程序。 我在讓我的編輯功能正常工作時遇到了一些問題。 當我單擊編輯時，輸入將添加被單擊元素的值。 但是如何更新項目？

const [items, setItems] = useState<any>([]);
const [comment, setComment] = useState("");
const [amount, setAmount] = useState("");

const handleAddSubmit = (e: any) => {
    e.preventDefault();

    const newItem = {
        id: new Date().getTime(),
        comment: comment,
        amount: amount,
        preview: preview
    }
    setItems([...items].concat(newItem));

    setFile(null);
    setComment("");
    setAmount("");
};

 const editItem = (item: any) => {
    setFile(undefined);
    setComment(item.comment);
    setAmount(item.amount);
};

const deleteItem = (id: any) => {
    const updatedItems = [...items].filter((item) => item.id !== id);

    setItems(updatedItems);
}

return (
       <div>
        {items.map((item: any, index: any) => {
                return (
                    <div key={item.id}>
                        <div>{item.comment}</div>
                        <div>{item.amount} $</div>
                        <div onClick={() => editItem(item)}>Edit</div>
                        <div onClick={(e) => deleteItem(item.id)}>Delete</div>
                    </div>
                );
            })}

               <input
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                placeholder="Comment"
            />
            <input
                value={amount}
                onChange={(e) => setAmount(e.target.value)}
                type="number"
            />
            <button formAction="submit">Add</button>
        </div>

)

Answer 1

您可以使用地圖遍歷列表的每個元素並為要更新的項目創建一個新對象：

const editItem = (item) => {
  setItems(items.map(i => i.id === item.id
    ? {...i, comment, amount}
    : i);
  setComment("");
  setAmount("");
}

Answer 2

所以當你點擊編輯按鈕時，根據你的代碼，這個函數會被觸發

const editItem = (item: any) => {
    setFile(undefined);
    setComment(item.comment);
    setAmount(item.amount);
};

現在這個函數正在更新狀態並且在輸入標簽內你使用狀態作為值，所以這就是你得到你得到的結果的原因

現在您可以將代碼更改為

const editItem = (item) => {
     setItems(items.map(i => i.id === item.id ? {...i, comment, amount} : i);
    setComment("");
    setAmount("");
};

Answer 3

看起來您剛剛忘記向按鈕添加 onclick 處理程序：

  <button formAction="submit" onClick={handleAddSubmit}>Submit</Button>