状態がのonClickアクションに更新されませんが、私はここに私のPlayerKeyコンポーネントの状態を設定しようとしているコンポーネント

Question

を反応させることSETSTATEにできません：

class PlayerKey extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      activeKeys:[] 
     } 
    } 

    activateKey = (e) => { 
     this.setState({ 
      activeKeys:["2","3"] 
     }) 
    } 

    render() { 
     return (
      <div className="key" data-row-number={this.props.rowKey} data-key-number={this.props.dataKeyNumber} onClick={this.activateKey}></div> 
     ) 
    } 
} 

私はコンソールロギングthis.stateを試してみましたactivateKeyでそれは私にコンポーネントの問題はない（空の配列）ので、私はそれを更新できないのか分からないの状態を与える？反応内の

Answer 1

setStateメソッドは非同期であり、更新された状態値を直ちに反映しません。

リアクションでは、複数のsetState（）呼び出しを1つのアップデートにまとめてパフォーマンスを向上させることができます。

したがって、最近設定された状態値にアクセスすると、は古い値を返します。状態が実際に設定されているかどうかを確認するには、実際に関数をsetStateにコールバックとして渡して、更新された状態値を確認してください。 React Docs

あなたの場合のように、関数をコールバックとして以下のように渡すことができます。

activateKey = (e) => { 
    this.setState({ 
     activeKeys:["2","3"] 
    },() => { 
     console.log(this.state.activeKeys); // This is guaranteed to return the updated state. 
    }); 
} 

このフィドルを参照してください：JSFiddle