React输入框清空后自动重置为初始值，无法保留空值问题求助

你的代码中editValue是平面对象，无法区分后端数组中不同项的同名字段，且输入框清空时，若触发组件重渲染（比如后端数据重新拉取、其他状态更新），会因字段判断逻辑导致输入框回退到初始值。本质是状态结构与后端数据结构不匹配，平面对象无法对应数组型的后端数据。

将editValue的结构改成和backendValue一致的数组结构，每个元素对应后端数组中对应项的编辑状态，确保每个输入框的修改独立存储、互不干扰。

修改后的代码示例 #

import { useState, useEffect } from 'react';

const [backendValue, setBEValue] = useState([]); // 后端获取的数据
const [editValue, setEditValue] = useState([]); // 存储编辑后的数据，结构和backendValue一致

// 获取后端数据后，初始化editValue为后端数据的副本
useEffect(() => {
  // 示例：假设这里通过API获取后端数据
  // fetch('/api/data').then(res => res.json()).then(data => setBEValue(data));
  
  // 当backendValue更新时，同步初始化editValue
  if (backendValue.length > 0) {
    setEditValue(backendValue.map(item => ({ ...item })));
  }
}, [backendValue]);

function handleChange(index, key, value) {
  setEditValue(prev => {
    // 复制原数组，避免直接修改状态
    const updatedEditValue = [...prev];
    // 更新对应位置对应字段的值
    updatedEditValue[index] = {
      ...updatedEditValue[index],
      [key]: value
    };
    return updatedEditValue;
  });
}

return (
  <div>
    {backendValue.map((item, index) => (
      <div key={item.id || index}> {/* 优先用item的唯一id作为key，无id则用index */}
        {Object.keys(item).map((key) => (
          <input
            key={`${index}-${key}`} // 用index+key作为输入框唯一key，避免同名字段冲突
            type="text"
            onChange={(e) => handleChange(index, key, e.target.value)}
            value={editValue[index]?.[key] || ''} // 直接取对应位置的编辑值，为空则显示空字符串
          />
        ))}
      </div>
    ))}
  </div>
);

关键改动说明 #

1. 状态结构对齐：editValue从平面对象改为数组，与backendValue结构一致，避免不同项的同名字段互相覆盖。
2. 初始化编辑状态：通过useEffect在后端数据更新时，同步初始化editValue为后端数据的副本，保留初始值同时支持独立编辑。
3. 精准修改逻辑：handleChange接收数组索引和字段名，精准定位要修改的字段，避免状态混乱。
4. 输入框key优化：用index+key作为输入框唯一key，防止同名字段的输入框出现渲染异常。

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