渲染后调用 ComponentDidMount，向我抛出未定义错误的映射答案

【问题标题】：ComponentDidMount is called after render throwing me map of undefined error渲染后调用 ComponentDidMount，向我抛出未定义错误的映射
【发布时间】：2018-02-14 05:57:28
【问题描述】：

我正在使用 React 生命周期组件，当我尝试使用 ComponentdidMount 时，它抛出了 Uncaught TypeError: Cannot read property 'map' of undefined。请帮我：接口：函数 getRegionsData() { 常量头 = { 标题：{ "tokenid": localStorage.getItem('token'), "用户名": localStorage.getItem('用户名'), } }; const url = baseurl + '/getStatesDistrictsTalukasAndVillages'; 控制台.log(url); return axios.get(url,header).then(data =>data.data.Message);

MYJS.js:
import {getRegionsData} from '../../../Api';

    constructor(props){
        super(props);
        this.state={
            regionsData:[]
        }
    }

    regions(){
        getRegionsData().then((regionsData)=>{
            this.setState({regionsData})
        })
    }
    componentDidMount(){
        this.regions();
    }

    render(){
        const {regionsData} =this.state;
        console.log(regionsData);
        return(
            <div className="animated fadeIn">
                <div className="row">
                    <div className="col-lg-12">
                        <form ref="userForm" className="demoform">
                            <div className="input-group mb-3">
                                {/*<span className="input-group-addon"><img src={'img/user.png'}/></span>*/}
                                <label>Name</label> <input type="text" className="form-control" ref="name"
                                                           placeholder="Name" />
                            </div>
                            <div className="input-group mb-3">
                                <select>
                                    <option>India</option>
                                </select>
                            </div>
                            <div className="input-group mb-3">
                                <select>
                                    <option>India</option>
                                    {regionsData.States.map((state, stateId)=>{
                                        return (
                                            <option key={ stateId } value={state.statesId}>{state.statesName}</option> )
                                    })}
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        )
    }
}

【问题讨论】：

如果您在调用 componentDidMount 函数后收到此错误，则很可能regionsData.States 实际上不是您接收的数据中的数组。是这种情况还是这里发生了其他事情？

标签： reactjs components

【解决方案1】：

问题是您正在尝试映射未定义的对象键。我们无法知道您的响应数据是什么样的。您将regionsData定义为一个数组，但是您正在执行此“regionsData.States.map”，所以regionsData数组或对象？设置您的初始状态“regionsData：{states：[]}”或执行此“regionsData.map”。

【讨论】：

然后像这样设置您的初始状态，您的初始区域数据是此代码的数组，并尝试将未定义的数组映射到未定义的对象中。 componentDidMount 在 render 方法之后调用，因此渲染抛出错误，因为您没有在“regionsData”中设置新数据。
对不起我的错，将对象声明为数组..得到错误点:-)