使用动态键值对切换React组件状态失败问题求助

嘿，我瞅了下你的代码，问题出在这几个地方，咱们一步步来修复：

1. 事件对象的不一致引用 #

你在setState里同时用了e.target.value和event.target.value，这里的event并没有被定义（函数参数是e），这会直接导致报错，状态自然切换失败。要统一用函数参数里的e，还可以把目标键存成变量让代码更清晰：

修改后的changeAnimation函数：

changeAnimation = e => {
  const animationKey = e.target.value;
  this.setState(
    { [animationKey]: !this.state[animationKey] },
    () => { console.log(this.state); }
  );
}

2. 可选优化：用函数式更新保证状态准确性 #

因为setState是异步操作，当你依赖当前状态来更新新状态时，最好用函数式更新的方式，这样能确保拿到的是最新的状态值，避免异步导致的状态不一致问题：

changeAnimation = e => {
  const animationKey = e.target.value;
  this.setState(prevState => ({
    [animationKey]: !prevState[animationKey]
  }), () => {
    console.log(this.state); // 回调里可以稳定拿到更新后的状态
  });
}

3. 确认render里的调用匹配度 #

最后要确保你在render里绑定事件的元素（比如按钮），它的value属性和状态里的键名完全一致，举个例子：

<button value="firecrackerAnimation" onClick={this.changeAnimation}>
  切换鞭炮动画
</button>
<button value="mainImageBounceAnimation" onClick={this.changeAnimation}>
  切换主图弹跳动画
</button>

只有value和状态键一一对应，动态键值对才能正确找到要切换的状态属性。

这样调整后，你的状态切换功能应该就能正常工作啦～

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