ReactJs Select标签不反映更新状态答案

【问题标题】：ReactJs Select tag not reflecting updated stateReactJs Select标签不反映更新状态
【发布时间】：2019-04-19 21:58:03
【问题描述】：

我有一个带有 value 和 onChange 实现的 select 标签，onChange 触发 redux 操作并更新 select 标签选项中正在使用的状态（因此组件随着状态更新而更新）

我尝试正常更新状态并使用回调函数。它没有帮助

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);

我希望状态必须反映在选择标签中。在 react-dev-tools 中打开时，我可以看到状态更新。

【问题讨论】：

标签： reactjs react-redux redux-saga

【解决方案1】：

这是因为.setState 是一个异步函数。您可以阅读更多关于此here 的信息。这通常意味着您要么必须导致回调或承诺。

【讨论】：