反应：动态创建的状态变量

Question

我试图运行下面的代码，但是从undefined语句中得到了console.log。有什么想法吗？

this.setState({ [show]: true })
console.log("this.state.show: " , this.state.show);

Answer 1

在您的代码中，您并未完全设置显示状态。例如：

const show = 'light';
this.setState({[show]: false}) // you set state for 'light'(this.state.light: false)

如果您之前未设置变量show，则应使用：

this.setState({ show: true })

并且如果您需要在设置后立即获得状态：

this.setState({ show: true }, () => console.log("this.state.show: " , this.state.show);)

Answer 2

如果您要检查状态是否确实更新了，最好的方法就是检查render()函数中的状态，因为在更新状态时始终会重新渲染该组件。这可能看起来像这样（我添加了一个三元操作作为显示和隐藏组件的示例）：

render(){
  console.log(this.state.show);
  return this.state.show ? <MyComponent /> : null;
}

但是如果您真的想在使用setState函数后检查状态是否发生了更改，例如在另一个函数内部（而不是render()内部），则需要在回调函数内调用console.log。这是因为状态需要花费一些时间来更新，因此同步代码将失败。 setState将回调函数作为第二个参数。因此，您可以像这样重新编写：

this.setState({ show: true }, () => console.log("this.state.show: " , this.state.show));

希望有帮助...