React中通过字符串形式变量名修改其数值的实现问题

DevOps 小满

2026-7-14

React点击按钮动态修改对应变量的临时解决方案

问题核心

你原来的写法里，name是从按钮属性拿到的字符串，直接name = name +1只是拼接字符串，根本没修改目标变量；eval能读取变量值，但没法直接修改原变量，而且这种写法既不符合规范也不安全。

无需大幅修改的两种方案

方案1：用React状态管理（推荐，能触发组件更新）

把所有需要修改的变量放到一个useState对象里，通过键名动态访问修改：

// 组件内初始化状态
const [counters, setCounters] = useState({
  myVar: 0,
  // 其他需要修改的变量都可以加在这里
});

const handleClick = (e) => {
  const name = e.currentTarget.getAttribute("data-value");
  
  // 打印当前值
  console.log(counters[name]);
  
  // 更新对应变量，必须创建新对象让React检测到变化
  setCounters(prevState => ({
    ...prevState,
    [name]: (prevState[name] || 0) + 1
  }));
  
  // 注意：这里打印的是更新前的值，因为setState是异步操作
  // 如果要看到最新值，可以在组件渲染时打印，或者用useEffect监听counters变化
}

按钮写法保持不变，确保data-value和状态对象里的键名一致：

<button data-value="myVar" onClick={handleClick}>点击加1</button>

方案2：用普通对象临时存变量（不推荐，无法触发组件更新）

如果暂时不想用状态，用普通对象存变量，修改后组件不会重新渲染，但能在其他地方读取最新值：

// 组件内定义一个普通对象
const counters = {
  myVar: 0
};

const handleClick = (e) => {
  const name = e.currentTarget.getAttribute("data-value");
  
  console.log(counters[name]);
  counters[name] = (counters[name] || 0) + 1;
  console.log(counters[name]); // 这里能看到更新后的值
}