React Native中setState无法切换状态变量值的问题求助

嘿，我来帮你排查下问题所在，其实都是几个常见的React setState使用误区导致的：

先看你第一个版本代码的问题： #

1. 错误的状态访问方式：你用了this.state.label，但label是传入的字符串参数，点语法会直接去状态里找名为label的属性，而不是你传入的变量对应的属性。比如你传了'isExpanded'，它找的是this.state.label而不是this.state.isExpanded，这肯定不对！应该用方括号语法this.state[label]来访问动态属性。
2. 没必要的new Boolean()：这种方式创建的是布尔对象而非原始布尔值，不仅冗余还可能带来意外问题，直接用true/false赋值就行。
3. 异步状态的错误打印：setState是异步操作，你把console.log(this.state)直接作为第二个参数，会立刻执行（此时状态还没更新），应该把它放在一个回调函数里，这样才会在状态更新完成后触发。

再看第二个版本的问题： #

1. 错误的前状态访问：你写了this.preState.label，但preState是setState回调函数的参数，直接用preState就行，不需要加this。
2. 未使用计算属性名：更新状态时你写的是label: !xxx，这会把label作为属性名存到状态里，而不是你传入的变量值，必须用[label]来表示动态属性名。
3. 同样的异步打印问题：和第一个版本一样，console.log没放在回调函数里。

正确的写法（推荐函数式更新） #

因为setState是异步的，函数式更新能确保你拿到最新的前状态，避免状态不一致的问题：

expandLists(label) {
  this.setState(prevState => ({
    // 用计算属性名指定要更新的状态
    [label]: !prevState[label]
  }), () => {
    // 状态更新完成后再打印，才能拿到正确的值
    console.log('Updated state:', this.state);
  });
}

如果你想修改第一个版本的代码，也可以改成这样： #

expandLists(label) {
  // 用方括号获取当前状态值
  const currentValue = this.state[label];
  const result = !currentValue;
  
  console.log('Result =', result);
  this.setState({ [label]: result }, () => {
    console.log('Updated state:', this.state);
  });
}

核心要点总结： #

• 当需要通过变量访问/设置对象属性时，一定要用方括号语法，不能用点语法。
• setState是异步的，不要在调用后立刻访问this.state，需要在状态更新后执行的逻辑要放在setState的第二个回调参数里。
• 涉及依赖前状态的更新时，优先使用函数式更新（给setState传函数），这是React官方推荐的做法。

内容的提问来源于stack exchange，提问作者Kavinkumar . N