React循环渲染多组输入框并取值为对象数组的问题

1. 输入框同步更新问题 #

所有x输入框同步变化的核心原因是**Array.fill()填充的是同一个对象的引用**。当你用Array(n).fill({x: 0, y: 0})初始化数组时，数组里的每一项都指向同一个对象，修改任意输入框的值都会改变这个共享对象的属性，导致所有输入框同步更新。

修复方式： #

初始化数组时，为每个位置创建独立的对象，避免引用共享：

// 替换原初始化逻辑
const [items, setItems] = useState(
  Array.from({ length: n }, () => ({ x: 0, y: 0 }))
);
// 也可以用map实现：Array(n).fill().map(() => ({x: 0, y: 0}))

2. "Map is not a function"错误 #

这个错误是因为状态被意外修改成了非数组类型（比如单个对象、undefined），导致后续调用map()时出错。要确保更新状态时始终保持数组结构：

正确的输入值更新逻辑： #

编写handleChange函数时，通过索引定位要修改的项，复制原数组并更新对应元素，避免直接修改原状态：

const handleChange = (index, key, value) => {
  setItems(prevItems => {
    // 复制原数组，避免直接修改状态
    const newItems = [...prevItems];
    // 修改对应索引元素的指定属性
    newItems[index] = { ...newItems[index], [key]: Number(value) };
    return newItems;
  });
};

渲染输入框时绑定对应索引和属性：

{items.map((item, index) => (
  <div key={index}>
    <input
      type="number"
      value={item.x}
      onChange={(e) => handleChange(index, 'x', e.target.value)}
    />
    <input
      type="number"
      value={item.y}
      onChange={(e) => handleChange(index, 'y', e.target.value)}
    />
  </div>
))}

3. 转换为目标格式的对象数组 #

你的items状态本身就是[{x:..., y:...}, ...]的格式，直接使用items即可，不需要额外转换。如果需要导出或处理，直接调用这个状态数组就行。

完整示例片段： #

import { useState } from 'react';

function App() {
  const n = 3; // 自定义需要的组数
  const [items, setItems] = useState(
    Array.from({ length: n }, () => ({ x: 0, y: 0 }))
  );

  const handleChange = (index, key, value) => {
    setItems(prevItems => {
      const newItems = [...prevItems];
      newItems[index] = { ...newItems[index], [key]: Number(value) };
      return newItems;
    });
  };

  // 查看目标格式的数组
  const showResult = () => {
    console.log(items);
  };

  return (
    <div>
      {items.map((item, index) => (
        <div key={index}>
          <input
            type="number"
            value={item.x}
            onChange={(e) => handleChange(index, 'x', e.target.value)}
          />
          <input
            type="number"
            value={item.y}
            onChange={(e) => handleChange(index, 'y', e.target.value)}
          />
        </div>
      ))}
      <button onClick={showResult}>查看结果</button>
    </div>
  );
}

export default App;

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