React中用对象数组渲染多Input组件失效，请求技术帮助

你的代码里有两个核心问题导致所有输入框无法正常工作：

• 所有输入框的value都硬绑定到了description.city，导致所有输入框显示的都是同一个值
• 更新函数update只修改city字段，不管操作哪个输入框，都只会改变city的值

下面是修复后的完整代码：

const test = [
  {id: 1,state: 'city'},
  {id: 2,state: 'language'},
  {id: 3,state: 'brand'},
  {id: 4,state: 'shop'},
]
const Auth = () => {
  const [description, setDescription] = useState({city: "", language: "", brand: "", shop: ""});

const handleClick = async (event: any) => {
      await store.update(description.city, description.brand);
  };

// 修改update函数，接收事件和对应的state字段
const update = async (e: ChangeEvent<HTMLInputElement>, field: string) => {
      setDescription({
        ...description,
        [field]: e.target.value // 使用计算属性名，动态更新对应的字段
      });
  };

return (
        <>
          {test.map(({ state, id}) => (
                <TextField
                    key={id}
                    label={state}
                    id={state}
                    autoComplete="off"
                    variant="outlined"
                    className={styles.textFieldAuth}
                    helperText={state}
                    value={description[state]} // 动态绑定对应字段的值
                    onChange={(e) => update(e, state)} // 传递当前的state字段给update函数
                />
          ))}
             <Button
              className={styles.saveButton}
              variant="contained"
              color="inherit"
              id="login"
              onClick={handleClick}
             >
              Save
              </Button>
        </>
)
}

关键修改说明： #

1. 动态绑定value：把value={description.city}改成value={description[state]}，每个输入框会对应到description里的专属字段（比如language输入框取description.language）
2. 传递字段标识：在onChange里通过匿名函数把当前的state字段传给update，让函数明确知道要更新哪个属性
3. 动态更新字段：在update函数里用计算属性名[field]: e.target.value，根据传入的字段名精准更新对应属性

修改后，每个输入框就能独立控制自己对应的字段值，正常实现输入和数据同步了。

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