javascript — Reactjs — Установка состояния из реквизита с помощью setState в дочернем компоненте

Reactjs — установка состояния из реквизита с помощью setState в дочернем компоненте

Как также сказал @Vikram, componentWillReceiveProps не вызывается в первый раз, поэтому, когда ваш компонент первоначально монтируется, ваше состояние не устанавливается, поэтому вам нужно установить состояние с помощью props в функции componentWillMount/componentDidMount (которая вызывается только при первый рендер) также вместе с функцией componentWillReceiveProps

 componentWillReceiveProps = props ={amp}gt; { if(props.members !== this.props.members) { this.setState({ members : props.members }); } } componentWillMount() { this.setState({ members : this.props.members }); } 

Начиная с версии 16.3.0 , вы будете использовать метод getDerivedStateFromProps для обновления состояния в ответ на изменение реквизита,

getDerivedStateFromProps вызывается после создания экземпляра компонента, а также при получении новых реквизитов. Он должен возвращать объект для обновления состояния, или нуль, чтобы указать, что новые реквизиты не требуют никаких обновлений состояния.

 static getDerivedStateFromProps(nextProps, prevState) { if(nextProps.members !== prevState.memebers) { return { members: nextProps.members }; } return null; } 

РЕДАКТИРОВАТЬ: Произошло изменение в API getDerivedStateFromProps с версии 16.4, где он получает реквизиты, заявляет в качестве аргументов и вызывается при каждом обновлении вместе с начальным рендерингом. В таком случае вы можете запустить новое монтирование компонента, изменив ключ.

 {amp}lt;SortByAlphabet key={members} /{amp}gt; 

и в SortByAlphabet есть

 componentWillMount() { this.setState({ members : this.props.members }); } 

или используйте getDerivedStateFromProps как

 static getDerivedStateFromProps(props, state) { if(state.prevMembers !== props.members) { return { members: nextProps.members, prevMembers: props.members }; } return { prevMembers: props.members }; } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector