React表单预加载默认值后无法更新的问题求助

嘿，我仔细看了你的代码，发现几个关键问题导致表单预加载默认值后没法正常更新，咱们一步步来解决：

问题分析 #

1. 错误的对象遍历方式：你在Object.keys(baseData[0]).map和Object.values(item).map里用了解构({id,nutrient})，但Object.keys返回的是属性名字符串（比如"nutrient"），Object.values返回的是属性值（比如"Energy"），根本拿不到id和nutrient，这直接导致输入框的key、id、value都设置错误。
2. 渲染原始数据而非状态数据：你渲染列表时用的是原始的baseData，而不是我们维护的data状态，所以哪怕状态更新了，页面也不会同步显示最新值。
3. 更新逻辑单一且输入框标识混乱：你的updateValue函数只更新nutrient属性，没法处理per100、per35这些字段的修改；而且输入框设置了重复的id="name"，React没法正确追踪每个输入框的变化。

修复后的代码 #

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const baseData = [
    { nutrient: 'Energy', per100: '449kcal', per35: '157kcal', id: 6 },
    { nutrient: 'Fat', per100: '24.4g', per35: '8.6g', id: 1 },
    { nutrient: 'Saturated fat', per100: '4.5g', per35: '1.6g', id: 2 },
    { nutrient: 'Monounsaturated fat', per100: '13.6g', per35: '4.8g', id: 3 }
  ];

  const [data, setData] = useState(baseData);

  // 修改更新逻辑：接收数据项id、要更新的字段名和新值
  const updateValue = (itemId, field, value) => {
    setData(prevData => 
      prevData.map(item => 
        item.id === itemId ? { ...item, [field]: value } : item
      )
    );
  };

  return (
    <div>
      {/* 遍历状态中的data，确保页面随状态更新 */}
      {data.map(item => (
        <div key={item.id} className="nutrient-row">
          {/* 用Object.entries遍历属性，同时拿到字段名和值，排除不需要编辑的id */}
          {Object.entries(item).filter(([key]) => key !== 'id').map(([field, value]) => (
            <input
              key={`${item.id}-${field}`} {/* 生成唯一key，避免渲染冲突 */}
              type="text"
              value={value}
              onChange={(e) => updateValue(item.id, field, e.target.value)}
              placeholder={field}
            />
          ))}
        </div>
      ))}
    </div>
  );
}

关键修改说明 #

• 用Object.entries遍历属性：它能同时返回字段名和对应值，让我们清楚知道要更新哪个字段，也能正确设置输入框的初始默认值。
• 函数式状态更新：通过prevData基于最新状态修改，避免状态更新的竞态问题；用map找到目标数据项，展开运算符创建新对象，只更新指定字段，保证状态不可变。
• 渲染状态数据data：这样状态更新时，页面会自动重新渲染最新的表单值。
• 唯一key设置：用${item.id}-${field}作为每个输入框的key，确保React能正确识别每个输入框，避免渲染错误。
• 排除id字段：id是数据的唯一标识，不需要编辑，所以过滤掉不渲染对应的输入框。

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