Во-первых, вам не нужно хранить реквизиты компонента в объекте состояния.Это на самом деле считается анти-паттерном в реакции.Вместо этого просто используйте ваш реквизит непосредственно в методе рендеринга:
render() {
return (
<div className={'container categories'}>
<div className={'row center'} onClick={() => this.props.history.push('/addcategories')}>
<div className={'col s24 m12'}>
<p>Create New Category</p>
</div>
</div>
<div className={'row'}>
<div className={'col s24 m12'}>
{/*{() => this.renderCategories()}*/}
{this.props.categories && this.props.categories.map(category => {
return <Category category={category} key={category.id}/>
})}
</div>
</div>
</div>
);
}
Следовательно, в вашем componentWillMount
вам нужно только инициировать запрос:
componentWillMount() {
this.props.getCategories();
}
Вы также можетесделайте это в componentDidMount()
метод жизненного цикла.
Теперь, когда ваш запрос разрешается и ваши категории обновляются в хранилище (Redux), они снова передаются вашему компоненту, вызывая его обновление.Это также будет происходить с каждым обновлением категорий, хранящихся в магазине.
Также вам не нужно вызывать forceUpdate
, как это, если у вас нет компонентов, реализующих метод жизненного цикла shouldComponentUpdate
, и вы не хотите, чтобы они игнорировалисьэто и сделать принудительное обновление.Вы можете прочитать обо всех этих методах жизненного цикла (и вам это необходимо, если вы используете React) здесь .