Question

我想使用从mapStateToProps获得的道具设置组件的局部状态。当我在ComponentWillMount（）方法或ComponentDidMount（）方法中使用this.setState时，它是未定义的。

componentWillMount() {
    this.props.fetchBooks(this.props.id);
    this.setState({
      books:this.props.books
    })
  }

const mapStateToProps = (state, ownProps) => {
  let id = ownProps.match.params.book_id;
  return {
    id: id,
    books: state.library.books,
  };
};

使用mapDispatchToProps获得的fetchBooks（）函数检索“ books”数据。如何使用从mapStateToProps获得的道具设置状态？

Answer 1

问题可能是this.props.fetchBooks是异步操作。在这种情况下，this.setState在操作完成之前被调用，因此未定义值。

但是您为什么要在当地存放图书？为什么不直接使用books道具呢？

通常不需要使用派生状态，这可能不是一个好主意（有关详细说明，请参阅此blog post from the official React website）。

如果您确实需要将图书存储在本地状态，则可以：

如果fetchBooks返回承诺，请使用then或await（并按照@Baruch的建议将代码移至componentDidUpdate中）
使用getDerivedStateFromProps

Answer 2

您最好直接在render() {} this.props.assignedSupervisors内部使用，而不要将其置于类状态。

否则使用

componentDidUpdate(prevProps, prevState) {
 if (this.props.assignedSupervisors && this.props.assignedSupervisors !== prevProps.assignedSupervisors) {
  this.setState({
     supervisors:this.props.assignedSupervisors
  })
 }
}

Answer 3

您的traverse生命周期方法将仅触发一次，因此使用它来调用获取数据并使用数据的函数很可能行不通。您应该改用componentWillMount。

componentWillReceiveProps

React Redux |使用mapStateToProps的setState

3 个答案: