React中如何将数组元素的status更新为deleted而非直接移除？

1. 修正初始状态与添加函数的对象结构 #

原代码中useState([initialName])会把状态变成二维数组，且handleAdd添加的是空字符串而非符合结构的对象，先调整这两处：

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

export default function changeNames(){
  // 初始状态改为单个对象的数组，避免二维结构
  const [name, setName] = useState([initialName]);

  // 添加新的空对象，保持数组内元素结构统一
  const handleAdd = () => {
    setName([...name, { name: "", status: "" }]);
  };
  // ... 其他函数
}

2. 重写删除函数handleRemoveClick #

把原删除元素的逻辑改成更新对应对象的status为deleted，不直接移除元素：

const handleRemoveClick = (index) => {
  // 复制原数组，避免直接修改状态
  const list = [...name];
  // 展开原有对象并更新status字段，保留其他属性
  list[index] = { ...list[index], status: "deleted" };
  setName(list);
};

3. 修正渲染部分的细节问题 #

原渲染代码存在几个小错误，同时可以根据status控制元素的交互逻辑（比如禁用已标记为deleted的输入框）：

<div>
  {name.map((o, i) => {
    return (
      <tr key={"item-" + i}>
        <td>
          <div>
            {/* 修正value绑定为o.name，根据status禁用输入框 */}
            <input
              type="text"
              value={o.name}
              onChange={(event) => handleItemChanged(event, i)}
              placeholder="Name it"
              disabled={o.status === "deleted"}
            />
          </div>
        </td>
        <td>
          {/* 给删除按钮传当前索引，且只在非deleted状态下显示 */}
          {o.status !== "deleted" && (
            <button type="button" onClick={() => handleRemoveClick(i)}>
              Delete
            </button>
          )}
        </td>
      </tr>
    );
  })}
  <div>
    {/* 修正Click为onClick，函数名统一为handleAdd */}
    <button onClick={handleAdd}>
      Add Language
    </button>
  </div>
</div>

4. 修正handleItemChanged的小问题 #

原函数中id未定义，这里假设你有可用的id变量，同时确保更新对象时保留原有结构：

const handleItemChanged = (event, index) => {
  const value = event.target.value;
  const list = [...name];
  // 展开原有对象，避免覆盖其他字段
  list[index] = { ...list[index], name: `${value}-${id}`, status: "added" };
  setName(list);
};

修改后，点击删除按钮时，对应元素不会被移除，而是将status更新为deleted，数组结构符合预期。

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