Реактивный редукционный реквизит недоступен при рендере

Question

В настоящее время у меня проблема с отображением некоторых результатов из дерева состояний редуксов. В моей консоли он показывает, что текущий объект прибыл после вызова this.props.walletStocks (хранится в дереве состояний редукса).

Однако Когда я запускаю следующий код, он говорит мне, что this.props.walletStocks ['wallet4'] не определен и, следовательно, еще не прибыл.

render() {
    return(
       {this.props.walletStocks['wallet4'].map((stock) => console.log(stock))}
    );
}

Я знаю, что это проблема с асинхронными данными, Я просто не знаю, как это исправить.

Заранее спасибо!

Answer 1

Правильное решение установит состояние загрузки при запуске асинхронного c запроса данных и обновит его после завершения асинхронной загрузки c данных (например, с помощью API Promise). Затем используйте это состояние загрузки, чтобы определить, что визуализируется.

Где-то в ваших действиях с избыточностью:

Promise.resolve()
    .then(() => dispatch({
        type: UPDATE_WALLET_STOCKS,
        loading: true,
    })
    .then(fetch('https://YOU_API'))
    .then(json => json.json())
    .then(walletStocks => dispatch({
        type: UPDATE_WALLET_STOCKS,
        walletStocks,
        loading: false,
    });

Предоставьте также состояние загрузки для вашего компонента и в YourComponent визуализации на основе этого флаг:

render() {
    return(
       {this.props.loading
        ? 'loading...'
        : this.props.walletStocks['wallet4'].map((stock) => console.log(stock))}
      );
    }
}

Answer 2

Вам нужно дождаться его загрузки и затем отобразить. Попробуйте проверить это.

render() {
return(
   {this.props.walletStocks && this.props.walletStocks['wallet4'].map((stock) => console.log(stock))}
);

}