Question

当我在加载时控制台登录组件以检查是否存在状态时，我遇到了一个奇怪的问题。我得到一个带有数据的数组。但是当我尝试遍历它时。我得到的地图未定义？我不明白为什么这让我发疯。

我在做什么错？我在其他组件上使用了相同的东西，没有任何问题。

谢谢！

我的代码：

import React, { Component } from 'react';
import ReactHtmlParser from 'react-html-parser';

// API settings
import { WP_DATA_URL } from 'constants/import';

// Axios fetching
import axios from 'axios';

// components
import Youtube from 'components/Youtube/Youtube';
import Slider from 'react-slick';
import SpinnerLoader from 'components/SpinnerLoader/SpinnerLoader';

class College extends Component {
    state = {
        page_college: [],
        loading: true,
    };

    getCoffee() {
        return new Promise(resolve => {
            setTimeout(() => resolve('☕'), 1000); // it takes half of a second to make coffee
        });
    }

    async showData() {
        try {
            const wpCollege = axios(`${WP_DATA_URL}/pages?slug=college`);

            await this.getCoffee();

            await Promise.all([wpCollege]).then(response => {
                this.setState({
                    page_college: response[0].data[0].acf,
                    loading: false,
                });

                console.log(this.state.page_college);
            });
        } catch (e) {
            console.error(e); // 
        }
    }

    componentDidMount() {
        this.showData();
    }

    render() {
        const { loading } = this.state;
        const { title, description, page_college: college } = this.state;

        return (
            <div className="pages--container">
                <div className="pages">
                    <div className="row center-xs pages--wrapper">
                        <div className="page">
                            <div className="page--content">
                                {loading ? (
                                    <SpinnerLoader />
                                ) : (
                                    <React.Fragment>
                                        <div className="col-xs-12 col-md-5">
                                            <h2>HOI</h2>
                                        </div>
                                        <div className="col-xs-12 col-md-6">
                                        {college.map(data => {
                                            console.log(data);
                                        })}
                                        </div>
                                    </React.Fragment>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default College;

Answer 1

setState是异步的，因此后面的console.log可能反映了以前的状态。通过setState作为第二个参数的回调，并检查那里的状态。 response[0].data[0].acf可能不是数组。

Answer 2

async componentDidMount() {
        await this.showData();
    }

只需让componentDidMount等待showData完成即可。

有状态数组时，React“地图”未定义/无效吗？

2 个答案: