如何修复React JS中编辑功能提交后新增而非修改的问题？

这个问题很典型，核心是你的代码目前没有区分「新增」和「编辑」两种模式——点击编辑后只是把内容放到输入框，但提交时还是走了新增的逻辑，所以会多出一条。咱们一步步来修复：

1. 新增状态跟踪编辑模式 #

首先需要在组件状态里添加关键变量，用来标记当前是否处于编辑状态以及编辑的是哪条数据：

import { useState } from 'react';

function YourComponent() {
  const [items, setItems] = useState([]);
  const [inputText, setInputText] = useState("");
  const [editingId, setEditingId] = useState(null); // 新增：跟踪当前编辑的条目ID，无编辑时为null
  // ...其他代码
}

2. 修改编辑按钮的逻辑 #

点击「编辑」时，要把当前条目的ID和内容同步到状态里，顺便给输入框自动聚焦，提升用户体验：

import { useState, useRef } from 'react';

function YourComponent() {
  const inputRef = useRef(null); // 新增输入框引用，用于自动聚焦

  const handleEdit = (item) => {
    setEditingId(item.id); // 记录要编辑的条目ID
    setInputText(item.text); // 把原内容填充到输入框
    inputRef.current.focus(); // 自动聚焦输入框，不用用户手动点击
  };

  // ...其他代码
}

3. 修改提交逻辑，区分新增/编辑 #

提交时判断editingId是否有值：如果有就修改对应条目，没有则新增：

const handleSubmit = (e) => {
  e.preventDefault();
  const trimmedText = inputText.trim();
  if (!trimmedText) return; // 空内容不提交

  if (editingId !== null) {
    // 编辑模式：遍历列表，更新对应ID的条目内容
    setItems(prevItems => 
      prevItems.map(item => 
        item.id === editingId ? {...item, text: trimmedText} : item
      )
    );
    setEditingId(null); // 退出编辑模式
  } else {
    // 新增模式：添加全新条目
    const newItem = { id: Date.now(), text: trimmedText };
    setItems(prevItems => [...prevItems, newItem]);
  }
  setInputText(""); // 清空输入框
};

4. 优化UI提示（可选） #

可以把提交按钮的文字根据模式切换，让用户一眼知道当前操作：

<form onSubmit={handleSubmit}>
  <input
    ref={inputRef}
    type="text"
    value={inputText}
    onChange={(e) => setInputText(e.target.value)}
  />
  <button type="submit">{editingId ? "Update" : "Add"}</button>
</form>

5. 绑定列表项的编辑按钮 #

确保每个列表项的编辑按钮能传递当前条目的信息：

<ul>
  {items.map(item => (
    <li key={item.id}>
      {item.text}
      <button onClick={() => handleEdit(item)}>Edit</button>
      {/* 如果有删除按钮也可以放在这里 */}
    </li>
  ))}
</ul>

这样修改后，点击编辑按钮会自动填充内容到输入框，提交时就会直接修改原条目，不会再新增啦~

内容的提问来源于stack exchange，提问作者user14728456