反应：动态创建 state 变量

Question

I tried to run the code below, but I got an undefined from the console.log statement. Any thoughts?

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

Answer 1

In your code you don't set state exactly for show. Example:

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

If you don't set variable show before, you should use:

this.setState({ show: true })

And if you need to get state right after setting:

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

Answer 2

If you are trying to check if state did update the best way to do that is simply to check for it inside the render() function, because the component is always re-rendered when you update the state. This would probably look like this (I have added a ternary operation as an example of how you can show and hide your component):

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

But if you really want to check if the state changed just after using the setState function, for example inside another function (and not render() ), you will need to call console.log inside a callback. This is because state takes some time to update and therefore synchronous code would fail. setState takes callback functions as a second parameter. So, you can just re-write like this:

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

Hope that helped...