第一次选择“选择”选项但第二次选择时，React / Redux失败

Question

我正在开发React/Redux CRUD form。

已解决：由于我使用的是Redux，因此应在调用API后使用Redux更改状态，而不是使用 this.setState 。

逻辑非常基本：用户在OwnerList中选择所有者，然后在第二个Select Form元素中显示他/她的宠物列表。

当用户从Select元素中选择所有者时，将调用此方法：

  changeOwner(value) {
    this.setState({owner_id: value['value']});    // set owner
    let action = ApposActionCreators.getPets(value['value'], true);
    this.props.dispatch(action); // API call
    this.setState({pets_options: this.props.pets_options}); // set pets
  }

这是所有者选择元素：

<Select name="owners" options={this.state.owners_options} value={this.state.owner_id} onChange={this.changeOwner.bind(this)} />

宠物元素：

 <Select ref="petSelect" autofocus options={this.state.pets_options} name="selected-pet" value={this.state.pet_id} onChange={this.changePet.bind(this)} searchable={true} />

我可以成功加载所有者列表，但是当用户第一次从所有者列表中选择一个元素时，即使操作和缩减器工作正常，也会填充 元素。 第二次及以后的次数都能正常工作，问题出在第一次。

我尝试了几样的事情，例如设置一个setTimeout但是没有解决问题。

Answer 1

this.props.dispatch()并不保证您在发送电话后立即在this.props.pets_options中拥有正确的值。如果你想用新的道具值做一些事情，你必须使用componentWillReceiveProps生命周期方法。

componentWillReceiveProps(nextProps) {
    this.setState({pets_options: nextProps.pets_options})
}