React JS动态映射输入框仅获最后一个值的问题求助

你的代码有两个核心问题导致只能拿到最后一个输入框的值：

1. setState未使用函数式更新：由于setState是异步操作，直接用...inputValue会因为闭包问题无法获取最新状态，导致之前的输入值被覆盖。
2. 输入框未绑定状态值：input的value绑定的是record.value（接口返回的初始值），而非state中存储的实时输入值，这会让输入框处于“非受控”状态，状态和用户输入不同步。

修正步骤： #

1. 修改handleChange函数：用函数式更新获取最新的state，避免闭包问题

const handleChange = (value, name) => {
  setInputValue(prevState => ({ ...prevState, [name]: value }));
}

2. 绑定输入框的value到state：让输入框成为受控组件，实时同步输入值

<input
  onChange={(e) => handleChange(e.target.value, e.target.name)}
  name={record.title}
  key={i}
  value={inputValue[record.title] || record.value}
/>

3. 获取所有值的数组：如果需要把所有输入值转为数组（保持和渲染顺序一致），可以这样做：

const valuesArray = records.map(record => inputValue[record.title] || record.value);
// 后续拼接操作示例
const concatenatedString = valuesArray.join('');

完整修正代码示例 #

import { useState } from 'react';

const YourComponent = ({ records }) => {
  // 初始化state为包含所有输入框初始值的对象
  const initialInputValues = records.reduce((obj, record) => {
    obj[record.title] = record.value;
    return obj;
  }, {});
  const [inputValue, setInputValue] = useState(initialInputValues);

  const handleChange = (value, name) => {
    setInputValue(prev => ({ ...prev, [name]: value }));
  };

  // 获取顺序一致的输入值数组
  const getInputValuesArray = () => {
    return records.map(record => inputValue[record.title]);
  };

  return (
    <div>
      {records.map((record, i) => (
        <div key={i}>
          <input
            onChange={(e) => handleChange(e.target.value, e.target.name)}
            name={record.title}
            value={inputValue[record.title]}
          />
        </div>
      ))}
      {/* 测试拼接功能 */}
      <button onClick={() => {
        const values = getInputValuesArray();
        console.log('拼接结果:', values.join(''));
      }}>查看拼接结果</button>
    </div>
  );
};

export default YourComponent;

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