React.js中如何设置动态状态名？新手求助附测试代码

嘿，刚上手React遇到瓶颈太正常了，咱们一点点拆解你这段代码里的问题，帮你理顺思路！

首先说你代码里的两个核心问题： #

• setState的异步特性：你在toggler函数里调用setState后立刻console.log(this.state.next)，这时候state还没完成更新，打印的永远是旧值。React为了性能优化，会把setState的更新操作批量处理，不是同步执行的。
• 动态修改state属性的语法错误：你注释里写的{abc}: this.state.{abc}是无效的JavaScript语法，要实现根据参数动态修改对应的state属性，得用计算属性名的写法。

修复后的完整代码示例： #

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      settings: true,
      next: false,
    };
    // 别忘了绑定this！否则toggler里的this会指向undefined
    this.toggler = this.toggler.bind(this);
  }

  toggler(abc) {
    console.log(">>", abc);
    // 用计算属性名动态修改对应的state属性
    this.setState(
      prevState => ({
        [abc]: !prevState[abc]
      }),
      // setState的回调函数，这里能拿到更新后的state
      () => {
        console.log("更新后的state:", this.state);
      }
    );
  }

  render() {
    return (
      <div className="kalreg">
        {/* 假设MyButton是你定义的组件，点击时调用toggler传对应的属性名 */}
        <MyButton 
          name='settings' 
          isActive={this.state.settings}
          onClick={() => this.toggler('settings')}
        />
        <MyButton 
          name='next' 
          isActive={this.state.next}
          onClick={() => this.toggler('next')}
        />
      </div>
    );
  }
}

几个关键知识点解释： #

• 绑定this：在class组件里，类方法默认不会绑定this，所以要在constructor里用bind，或者用箭头函数定义toggler（比如toggler = (abc) => {}），否则调用toggler时this会指向undefined，导致无法访问this.state和this.setState。
• 函数式setState：当新的state依赖于旧的state时，推荐用函数式的setState（接收prevState参数），这样能确保拿到的是最新的旧state值，避免批量更新导致的错误。
• setState的回调：如果需要在state更新完成后做操作（比如打印、触发其他函数），要把逻辑放在setState的第二个参数（回调函数）里。

这样修改后，你的toggler函数就能正确地根据传入的参数动态切换对应的state属性，也能正确看到更新后的state值啦！

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