Передача реквизита через реагирующий маршрутизатор недоступна в componentDidMount?
Я передал реквизиты упомянутому компоненту через реагирующий маршрутизатор следующим образом:
<BrowserRouter>
<Switch>
<Route path = "/product-page" exact render = {(props) => ( <ShopPages {...props} response = {this.state.response}/>)}/>
</Switch>
</BrowserRouter>
Я хотел бы получить доступ к этому реквизиту в componentDidMount() примерно так:
componentDidMount() {
console.info(this.props.response)
}
Опора this.props.response доступна в компоненте, который я могу добавить в console.info в render (). Я не уверен, почему в приведенном выше сценарии консоль показывает пустой массив. Я попытался проверить, доступны ли данные, а затем показать данные как console.info( 'show', this.props.response && this.props.response) или добавив async так:
async componentDidMount() {
const data = await this.props.response
}
Но это тоже ничего не дает. Любая помощь?
Ответы 1
Я просто собираюсь предположить, что this.state.response - это не обещание, а на самом деле данные, поскольку вы сказали, что это пустой массив, поэтому async / await ничего не сделает.
ComponentDidMount () запускается только один раз, когда компонент монтируется, и НЕ является местом для выполнения действий, основанных на обновлениях свойств, которые могут произойти после монтирования. Поэтому я бы предложил передать обещание, и если это не вариант, сделайте что-нибудь вроде
componentDidUpdate(prevProps, prevState) {
if (!prevProps.response.length && this.props.response.length) {
//Your code
}
}
удалите
()вокруг вашего компонента<shopPage ... >, который вы его визуализируете, посмотрите, изменится ли он ????