React hooks - 编辑后更新列表中的项目

Question

I'm new to React Hooks. I am trying to make a small crud app, with add, edit, delete. I have some issues getting my edit function to work. When I click the edit, the input will add the values of the element that is clicked. But how do I update the item?

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

You can use a map to go through each element of a list and create a new object for the item you want to update:

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

Answer 2

So acc to your code when you click on the edit button, this function gets triggered

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

Now this function is updating the state and inside the input tags you are using the state as values, so this is the reason why you are getting the results you are getting

Now you can change your code to

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>