React中动态生成状态与处理函数的问题求助

你遇到的这个问题我之前也碰到过，确实单独写每个状态和处理函数不仅麻烦，还容易出错——尤其是你把字符串（比如"cristHandleChange"）传给onChange的时候，肯定会触发“String Instead Function”报错，毕竟onChange属性需要接收一个函数，而不是字符串。

下面给你一个更简洁且易维护的解决方案，既能解决报错问题，还能彻底避免代码重复：

核心思路 #

1. 用单个对象状态管理所有输入框的数值，代替多个独立的useState
2. 写一个通用的handleChange函数，通过输入框的name属性来动态更新对应状态
3. 移除数组中多余的handleChange字符串字段，因为不再需要单独的处理函数

修改后的完整代码 #

import { useState } from 'react';

export const myArr = [
  { name: "Crist", data: "crist", color: "lightblue" },
  { name: "Ruby", data: "ruby", color: "lightpink" },
  { name: "Diamond", data: "diamond", color: "white" },
];

export const myComponent = () => {
  // 用一个对象状态管理所有数量，键对应每个item的data值
  const [quantities, setQuantities] = useState({
    crist: 0,
    ruby: 0,
    diamond: 0
  });

  // 通用的处理函数，根据输入框的name动态更新对应状态
  const handleChange = (event) => {
    const { name, value } = event.target;
    // 使用函数式更新，确保获取到最新的状态
    setQuantities(prevState => ({
      ...prevState,
      [name]: Number(value) // 转成数字类型，因为输入框默认返回字符串
    }));
  };

  return (
    <>
      {myArr.map((item, index) => (
        <div className="main-inputs__wrapper" key={`item${index}`}>
          <label htmlFor={item.data}>{item.name}</label>
          <input
            type="number"
            name={item.data}
            value={quantities[item.data]} // 绑定对应状态的值
            style={{ background: item.color }}
            onChange={handleChange} // 传入通用处理函数
          />
        </div>
      ))}
    </>
  );
};

关键细节解释 #

• 单个对象状态quantities：把所有输入框的数值集中管理，后续新增元素只需要在初始化状态里加对应的键即可，不用再写新的useState
• 通用handleChange：通过解构event.target的name和value，利用计算属性名[name]来更新对应状态，同时把value转成数字类型（因为number类型的输入框返回的value还是字符串）
• 移除数组中的handleChange字段：现在所有输入框都复用同一个处理函数，不需要再存字符串形式的函数名了

这样修改后，代码既简洁又易维护，也彻底解决了之前的字符串代替函数的报错问题。

备注：内容来源于stack exchange，提问作者kahjuksEi