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

希望有帮助...

React：动态创建的状态变量

2 个答案: