Question

在MERN应用程序上工作时，我有一个componentDidMount，它使用axios从后端检索一些ID，并从ID中检索产品信息（prods）。但是，当最初加载页面时，我的应用程序中的状态仍然为空，相反，我将不得不在设置状态之前对状态进行更改。

我相信这可能与在componenDidMount中具有数组映射有关，我可以在node中更改后端。但是，我想先看看前端是否可以做任何事情。

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: []
}

React componentDidMount在页面加载之前未设置状态

1 个答案: