完成渲染后更新 React 状态

Question

我正在学习 React 的生命周期方法，我想知道如何最好地解决这种情况：

我有一个组件可以获取有关某人爱好的信息

  componentWillMount() {
    this.props.fetchHobbies(this.props.params.id);
  }

数据被发送到一个reducer，它被映射为组件底部的一个prop

function mapStateToProps(state) {
  return { 
    hobbies:state.hobbies.user
  };
}

我有一个名为 twitterbootstrap 的组件，它依赖于我的组件的状态来查看选择了哪些行。

const selectRowProp = {
  mode: 'radio',
  clickToSelect: true,
  bgColor: "rgba(139, 195, 74, 0.71)",
  selected: this.state.selected,
};

这是我的问题。我想访问 this.props.hobbies.selected.

--更新我正在使用 componentWillRecieveProps，因为它有一个 setState 选项。

componentWillReceiveProps(nextProps){
    this.setState({selected:next.props.hobbies })
}

我想使用this.props.hobbies.selected作为下一个要接收的道具。我将如何整合它？

Answer 1

nextProps是第一次渲染后传入的props对象。函数 componentWillReceiveProps 中没有名为 next.props 的内容。你可以做类似的事情。

componentWillReceiveProps(nextProps){
    this.setState({selected:nextProps.hobbies })
}

Updating React state after Finished Rendering