Redux-React: как передать обновленное состояние в функцию onChange?

Question

Я новичок в React и пробовал простую вещь. Я не понимаю, как изменить состояние и передать его в функцию. Пожалуйста, найдите мой код ниже: я пропускаю избыточный код, только пропуская точку фокуса, все работает отлично, кроме этой функции.

 state = {
    card: this.props.card // No probelm here , the props are correctly received in my component 
  };

Я пытаюсь обновить состояние onChange и использовать это значение состояния в моем диспетчер для генерации нового состояния после этого события. Вы можете найти фрагмент кода этой функции здесь:

<select
          class="form-control m-1"
          value={this.state.card.type}
          onChange={e => {
            let newType = e.target.value;
            this.setState(prevState => ({
              card: {
                ...prevState.card,
                type: newType
              }
            }));
            console.log(this.state.card) // **This gives me the old state, not updated one**
            this.props.updateCard(this.state.card) // Correctly receiving the updateCard Props , 
          }}
        >
          <option value="ABC">Option1</option>
          <option value="DEF">Option2</option>
        </select>

Мой диспетчер:

updateCard: card=> {
    dispatch({ type: "UPDATE_CARD", card: card})}

Мой редуктор:

  case "UPDATE_CARD": {
      console.log("INSIDE REDUCER");
      console.log(action.card);
      return {
        cards: state.cards.map(card=>
          card.id === action.card.id ? action.card: card
        )
      };
    }

Пожалуйста, помогите в этом. Я много чего тут искал, но ничего не помогло.

Answer 1

Это потому, что setState не является синхронным:

...
onChange ={e => {
  let newType = e.target.value;
  this.setState(prevState => ({
    card: {
      ...prevState.card,
      type: newType
    }
  }), () => {
    console.log(this.state.card) // will give you the new value
    // you should also do any updates to redux state here to trigger
    // re-renders in the correct sequence and prevent race conditions
  });
  console.log(this.state.card) // **This gives me the old state, not updated one**
  this.props.updateCard(this.state.card) // Correctly receiving the updateCard Props ,
}}
...