reactjs - 反应还原 | 使用 mapStateToProps 设置状态

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,
  };
};

'books' 数据是使用 mapDispatchToProps 获得的 fetchBooks() 函数检索的。如何使用从 mapStateToProps 获得的道具设置状态？

标签： reactjsreact-redux

Answer 1

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

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

使用派生状态通常是不必要的，而且可能不是一个好主意（请参阅React 官方网站上的这篇博文以获得深入的解释）。

如果您确实需要将书籍存储在当地状态，您可以：

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