Невозможно SetState Реагировать компоненту

Question

Я пытаюсь установить состояние моего PlayerKey компонента здесь, однако государство не будет обновляться на действия OnClick:

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 в activKey, и это дает мне состояние компонента без проблем (пустой массив), поэтому не уверен, почему я не могу его обновить?

Answer 1

setState метод в реакции асинхронный и не отражает обновленное значение состояния немедленно.

Реакция может привести к множеству вызовов setState() в одно обновление для производительности.

Таким образом, доступ к недавно установленному значению состояния может вернуть более старое значение. Чтобы узнать, действительно ли установлено состояние или нет, вы можете передать функцию как обратный вызов в setState и просмотреть обновленное значение состояния. React Docs

Как и в вашем случае, вы можете передать функцию в качестве обратного вызова следующим образом.

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

Смотрите эту скрипку: JSFiddle