React受控状态表单更新：如何绑定数组属性至输入框name属性

你的问题出在直接把整个对象传给了input的name属性——React会把对象转换成字符串[object Object]，这显然不是你想要的f_name或l_name。我们需要提取每个对象里的属性名称，再绑定到name上，同时把属性值绑定到input的value上，让表单成为受控组件。

方案一：适配你现有数组结构的写法 #

修改map遍历的逻辑，提取每个对象的属性名和对应值，同时记得给列表元素加唯一的key（React要求）：

function App() { 
  const data = [ { f_name: "alicia" }, { l_name: "johnson" } ]; 
  function handleChange(e) { 
    console.log("字段名:", e.target.name, "输入值:", e.target.value); 
  } 

  return ( 
    <div className="App"> 
      {data.map((item, index) => {
        // 获取当前对象的唯一属性名
        const fieldName = Object.keys(item)[0];
        return (
          <input
            key={index} // 用index当key是临时方案，若有唯一id优先用id
            name={fieldName}
            value={item[fieldName]}
            onChange={handleChange}
            type="text"
          />
        );
      })} 
    </div> 
  ); 
}

方案二：优化数据结构（更推荐） #

其实f_name和l_name属于同一个实体的两个字段，把它们放在同一个对象里更符合语义，遍历起来也更简洁：

import { useState } from 'react';

function App() { 
  // 用useState管理表单状态，这是React受控表单的标准写法
  const [formData, setFormData] = useState({
    f_name: "alicia",
    l_name: "johnson"
  });

  function handleChange(e) { 
    const { name, value } = e.target;
    // 更新对应字段的状态
    setFormData(prev => ({ ...prev, [name]: value }));
    console.log("更新后的数据:", formData);
  } 

  return ( 
    <div className="App"> 
      {/* 遍历对象的键值对 */}
      {Object.entries(formData).map(([fieldName, value]) => (
        <input
          key={fieldName} // 用字段名当key，天然唯一
          name={fieldName}
          value={value}
          onChange={handleChange}
          type="text"
          placeholder={`请输入${fieldName}`}
        />
      ))} 
    </div> 
  ); 
}

为什么这样改？ #

1. 提取属性名：用Object.keys(item)[0]或Object.entries可以拿到对象的键（也就是你要的f_name/l_name），绑定到input的name属性上。
2. 受控组件：把属性值绑定到value，配合useState管理状态，能实时同步用户输入和组件状态，这是React处理表单的最佳实践。
3. 唯一key：给每个input加唯一key，避免React列表渲染的警告，提升性能。

内容的提问来源于stack exchange，提问作者Charles Jr.