Реагировать Redux |setState используя mapStateToProps

Question

Я хочу установить локальное состояние компонента, используя реквизиты, полученные из mapStateToProps. Когда я использую this.setState в методе ComponentWillMount () или методе ComponentDidMount (), он не определен.

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' извлекаются с помощью функции fetchBooks (), полученной mapDispatchToProps. Как я могу установить состояние, используя реквизиты, полученные из mapStateToProps?

Answer 1

Возможно, проблема в том, что this.props.fetchBooks является асинхронной операцией. В этом случае this.setState вызывается до завершения операции, следовательно, неопределенное значение.

Но почему вы хотите хранить книги в локальном состоянии? Почему бы вам напрямую не использовать books prop?

Использовать производное состояние обычно не нужно, и это может быть плохой идеей (см. Этот пост на официальном сайте React дляподробное объяснение).

Если вам действительно необходимо хранить книги в локальном состоянии, вы можете:

• , если fetchBooks вернетобещание, используйте then или await (и переместите код в componentDidUpdate , как предложено @Baruch)
• используйте getDerivedStateFromProps

Answer 2

Ваш componentWillMount метод жизненного цикла сработает только один раз, поэтому его использование для вызова функции, которая извлекает данные, а также использует данные, скорее всего, не будет работать. Вы должны использовать componentWillReceiveProps вместо.

constructor(props) {
    props.fetchBooks(props.id);
}

componentWillReceiveProps(nextProps) {
    if (nextProps.books != this.props.books) {
        this.setState({books: nextProps.books});
    }
}

Answer 3

Лучше использовать прямо внутри вашего render() {} this.props.assignedSupervisors, а не переводить его в состояние класса.

В противном случае используйте

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