ReactJs Выберите тег, не отражающий обновленное состояние - PullRequest
0 голосов
/ 20 апреля 2019

У меня есть тег выбора со значением и реализованным onChange, onChange запускает действие с избыточностью и обновляет состояние, используемое в опциях тега выбора (поэтому компонент обновляется по мере обновления состояния)

Iпопытался обновить состояние в обычном режиме и с помощью функции обратного вызова. Это не помогает

import React from "react";
import { connect } from "react-redux";

export class SelectDestination extends React.Component {
  constructor(props)
  {
    super(props);
    this.state={defaultval:''}
  }
  onSelectChange = event => {
    let val=event.target.value
    this.setState({defaultval:event.target.value},function(){this.props.onSelectChange(val)})


  };

  render() {


    let options = this.props.state.planets.filter((x)=>this.props.state.vistedDestinatons.indexOf(x.name)===-1);
    console.log(options)
    return (
      <React.Fragment>
        {
          <select value={this.state.defaultval} onChange={this.onSelectChange} name="onselect">
            {options.map(x => (
              <option value={x.name.toString()}>{x.name}</option>
            ))}
          </select>
        }
      </React.Fragment>
    );
  }
}

const mapStateToProps = state => {
  return {
    state: state
  };
};
const mapDispatchToProps = dispatch => {
  return {
    onSelectChange: payLoad =>
      dispatch({ type: "SELCT_CHNG", payload: payLoad })
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SelectDestination);

Я ожидаю, что состояние должно быть отражено в теге select.При открытии в реагировать на инструменты я могу видеть обновление состояния.

1 Ответ

0 голосов
/ 20 апреля 2019

Это потому, что .setState является асинхронной функцией.Вы можете прочитать больше об этом здесь .Как правило, это означает, что вы должны либо вызвать обратные вызовы, либо обещания.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...