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

Question

Работая над приложением MERN, у меня есть componentDidMount, который использует axios для извлечения из бэкэнда некоторых идентификаторов и получения информации о продукте (продуктах) из идентификаторов.Однако состояния в моем приложении все еще пусты при первоначальной загрузке страницы, вместо этого мне придется внести изменения в состояние, прежде чем они будут установлены.

Я полагаю, что это может иметь какое-то отношение к отображению массива в componentenDidMount, я мог бы изменить внутренний интерфейс так в узле.Однако я хотел бы посмотреть, можно ли что-нибудь сделать в первую очередь.

componentDidMount() {
        axios
            .get("/api/featureds")
            .then(response => {
                this.setState({
                    featureIds: response.data
                });

                response.data.map(({ prodId, _id }) =>
                    axios
                        .get("/api/prods/" + prodId)
                        .then(response => {
                            if (response.data == null) {
                            } else {
                                                                this.state.featureTempList.push(response.data);
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        })
                );

                this.setState({
                    featureProds: this.state.featureTempList
                });
            })
            .catch(error => {
                console.log(error);
            });
}

Answer 1

Почему вы пытаетесь установить подобное состояние?

this.state.featureTempList.push(response.data)

Состояние должно быть установлено this.setState().

Так что вы можете попробовать сделать это:

this.setState((oldState) => ({
    featureTempList: oldState.featureTempList.push(response.data)
});

Просто не забудьте установить featureTempList в состояние при инициализации:

state = {
    featureTempList: []
}