どのように私の状態を更新できないのですか？

Question

class ProductCarousel extends Component { 
    constructor (props) { 
    super(props) 
    this.state = { 
     active: -1, 
     fullScreen: false 
    } 
    this.flky = {} 
    } 

    componentDidMount (props) { 
    this.flky = new Flickity('.carousel', flickityOptions) 
    this.flky.on('select',() => { 
     this.setState({ active: this.flky.selectedIndex }) 
    }) 
    } 

    fullScreen() { 
    this.setState({ fullScreen: true }) 
    console.log(this.state) 
    } 

    render() { 
    const images = this.props.images 
    return (
     <div> 
     <div className='carousel'> 
      {images.map((url, i) => (
      <img 
       className='productPhoto' 
       key={i.toString()} 
       onClick={this.fullScreen.bind(this)} 
       src={stripUrl(url)} 
       style={{maxWidth: '100%'}} 
      /> 
     ))} 
     </div> 
     </div> 
    ) 
    } 
} 

私はこのコンポーネントをjs内に持っていますが、関数fullScreenではthis.state.fullScreenが真であると思いますが、それでもなぜ偽ですか？

Answer 1

setStateは非同期です。 2番目のパラメータは、状態が実際に更新されたときに反応するために使用できるコールバックです。

Answer 2

setStateはすぐに状態を更新しません。代わりに保留中のトランジションが作成されます。

あなただけSETSTATE後、コンポーネントの状態を確認したい場合は、このようにそれを実行します。

this.setState({fullScreen: true},() => { 
    // I am triggered after the state is set 
    console.log(this.state) 
}) 

読むそれについてhere