在渲染之后调用ComponentDidMount抛出未定义错误的映射

时间:2018-02-14 05:57:29

标签: reactjs components

我正在使用React生命周期组件,当我尝试使用ComponentdidMount时,它会让我无法看到TypeError:无法读取属性' map'未定义的。请帮我:     API:         function getRegionsData(){         const header = {             标题:{                 " tokenid":localStorage.getItem(' token'),                 "用户名":localStorage.getItem('用户名'),             }         };         const url = baseurl +' / getStatesDistrictsTalukasAndVillages&#39 ;;         的console.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>

        )
    }
}

1 个答案:

答案 0 :(得分:1)

问题是您正在尝试映射未定义的对象键。我们不知道您的回复数据是什么。您将regionsData定义为一个数组,但您正在执行此操作&#34; regionsData.States.map&#34;所以regionsData数组或对象?,设置你的初始状态&#34; regionsData:{states:[]}&#34;或者这样做&#34; regionsData.map&#34;。