React中预填充文本框无法编辑的问题排查与解决请求

你的代码存在几个核心问题，直接导致了输入框无法正常编辑：

1. 状态与输入框值绑定逻辑错误 #

当前输入框的value直接绑定了原始API返回的data.serverName，而非React状态变量。这意味着输入框内容始终被原始数据固定，无法通过状态更新同步用户输入。同时你定义的server状态是数组类型，但setServer(e.target.value)却将其覆盖为字符串，类型不匹配进一步加剧了状态更新异常。

正确的逻辑应该是：将API获取的服务器列表存入状态，输入框绑定状态中对应项的值，修改时同步更新状态里的对应条目。

2. 函数调用与定义不匹配 #

useEffect里调用的是getServerNames，但实际定义的函数是getServerName，名称不一致会导致API数据无法正常获取，输入框无数据或数据异常。

3. useEffect语法错误 #

useEffect缺少闭合括号})，且未添加依赖数组（如果希望仅在组件挂载时执行一次，需添加空数组[]）。

4. 列表渲染缺少key属性 #

React列表渲染必须给每个子元素添加唯一key，否则会导致组件渲染异常、状态更新失效。

修复后的代码示例 #

const Details = () => {
  // 用状态存储完整的服务器列表
  const [servers, setServers] = useState([]);
  
  // 修正函数名，补充API请求逻辑
  const getServerNames = async() => {
    try {
      const response = await fetch('你的API接口地址');
      const apiData = await response.json();
      setServers(apiData);
    } catch (error) {
      console.error('获取服务器数据失败:', error);
    }
  }

  useEffect(() => {
    getServerNames();
  }, []); // 空依赖数组确保仅挂载时执行一次

  // 处理输入变化，按索引更新对应服务器的名称
  const serverNameChange = (index, e) => {
    // 拷贝原数组避免直接修改状态
    const updatedServers = [...servers];
    updatedServers[index].serverName = e.target.value;
    setServers(updatedServers);
  }

  return (
    <div>
      {servers.map((server, index) => (
        <input 
          key={server.id || index} // 优先用服务器唯一ID，无则用索引
          type="text" 
          name="server" 
          onChange={(e) => serverNameChange(index, e)} 
          value={server.serverName} 
        />
      ))}
    </div>
  );
};

核心修复总结 #

• 输入框value必须绑定React状态变量，确保用户输入能同步到状态并更新UI；
• 维护完整的服务器列表状态，修改时通过拷贝数组并更新对应项的方式更新状态；
• 修正函数名、useEffect语法错误，添加列表渲染的key属性。

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