为什么'map' function 显示未定义的错误，即使它已定义？

Question

I am using React with NodeJS and MongoDB to integrate FE with BE. I am working on Homepage and its divided in 4 phases.

Home.js

import React, {Component} from 'react';
import axios from 'axios';
import '../Styles/Home.css';
import HomeUH from './HomeUH';
import HomeLH from './HomeLH';
class Home extends React.Component
{
    constructor()
    {
        super();
        this.state={
            cities: [],
            widgets: []
        };
    }
    componentDidMount()
    {
        axios.get('http://localhost:4005/api/locationDD')
        .then(result => {
            this.setState({
                cities: result.data.locations
            })
        }).catch(error => {
            console.log(error);
        })

        axios.get('http://localhost:4005/api/widget')
        .then(result => {
            this.setState({
                widgets: result.data.widget
            })
        }).catch(error => {
            console.log(error);
        })
    }
    render()
    {
        const { cities, widgets } = this.state;
        return(
            <div>
                <HomeUH cities={cities}/>    
                <HomeLH widgets={widgets}/>    
            </div>
        );
    }
}

export default Home;

HomeUH.js

import React, {Component} from 'react';
import '../Styles/Home.css';
import homewall from '../Images/homewall.jpg';
class HomeUH extends React.Component
{
    constructor()
    {
        super();
    }
    render()
    {
        const { cities } = this.props;
        return(
            <React.Fragment>
                <img className="homewall" src={homewall} height="50%" width="100%"/>
                <div className="logo">
                    Sample   
                </div>
                <div className="heading">
                    Find the best Schools & Colleges
                </div>  
                <div className="search">
                    <select className="locdd">
                        <option value="0" selected disabled>Select Location</option>
                        {
                            cities.map((city, index) => {
                                return <option value={city.city_id} key={index}>{city.name}</option>
                            })
                        }
                    </select>
                    <div style={{position: 'relative', float: 'right'}}>   
                        <span className="glyphicon glyphicon-search" style={{position: 'absolute', fontSize: '2rem', top: '40px', left: '35px'}}></span>
                        <input className="restInput" type="text" placeholder="Enter School/College Name" style={{paddingLeft: '50px'}}/>
                    </div>
                </div> 
                <br/><br/>
            </React.Fragment>
        );
    }
}

export default HomeUH;

HomeLH.js

import React, {Component} from 'react';
import '../Styles/Home.css';
import QSItem from './QSItem';
class HomeLH extends React.Component
{
    constructor()
    {
        super();
    }
    render()
    {
        const { widgets } = this.props;
        return(
            <React.Fragment>
                <a id="heading1">Quick Searches</a> <br/>
                <a id="heading2">Discover different Colleges by Streams </a> <br/><br/>
                <div className="container-fluid" style={{minWidth: '1000px', margin: 'auto'}}>
                    <div className="row">
                        {
                            widgets.map((widget, index) => {
                               return <QSItem key={index} widget={widget}></QSItem>
                            })
                        }        
                    </div>           
                </div>
            </React.Fragment>
        );
    }
}

export default HomeLH;

QSItem.js

import React, {Component} from 'react';
import '../Styles/Home.css';
class QSItem extends React.Component
{
    render()
    {
        const {widget} = this.props;
        const img = require(`../${widget.image}`).default;
        return(
        <div className="col-sm-4 col-md-4 col-lg-4">
            <div className="card mb-3" style={{maxWidth: '540px', marginLeft: '35px'}}>
                <div className="row quicksearch" style={{paddingLeft: '1px', paddingBottom: '1px'}}>
                    <div className="col-md-4">
                        <img className="card-img" src={img} alt="" height="100%" style={{width: '140px', margin: 'auto'}}/>
                    </div>
                    <div className="col-md-8" style={{float: 'right'}}>
                        <div className="card-body">
                            <div className="tileheading">
                                {widget.name}
                            </div>
                            <div className="tilesubheading">
                                {widget.content}
                            </div>       
                        </div>
                    </div>
                </div>
            </div>    
        </div>
        )
    }
}

export default QSItem;

If you see in HomeUH.js in I applied map function for cities and it went well. But when I done same process in HomeLH.js for widget its showing error "Cannot read property 'map' of undefined" even though it is defined in 'widgets'.

Answer 1

Your problem is that you "override" your state with this.setState , You can use a callback to use previous state and merge your new value with the old state:

    componentDidMount()
    {
        axios.get('http://localhost:4005/api/locationDD')
        .then(result => {
            this.setState(prevState => ({
                ...prevState,
                cities: result.data.locations
            }))
        }).catch(error => {
            console.log(error);
        })

        axios.get('http://localhost:4005/api/widget')
        .then(result => {
            this.setState(prevState => ({
                ...prevState,
                widgets: result.data.widget
            }))
        }).catch(error => {
            console.log(error);
        })
    }

This should prevent your widgets to ever be undefined .

Another possible solution is to wait for both request to end before setting the data, this can be achieved with Promise.all :

        Promise.all([
            axios.get('http://localhost:4005/api/locationDD'),
            axios.get('http://localhost:4005/api/widget'),
        ])
        .then(([locationResult, widgetResult]) => {
            this.setState({
                widgets: widgetResult.data.widget,
                cities: locationResult.data.locations
            })
        }).catch(error => {
            console.log(error);
        })

In this case you will only update your state once.