React：动态创建的状态变量

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)

如果你之前没有设置变量显示，你应该使用：

this.setState({ show: true })

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

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

Answer 2

如果您试图检查 state 是否确实更新了，那么最好的方法就是在render()函数内部检查它，因为当您更新 state 时，组件总是会重新渲染。这可能看起来像这样（我添加了一个三元运算作为如何显示和隐藏组件的示例）：

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));

希望有所帮助...