我正在使用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>
)
}
}
答案 0 :(得分:1)
问题是您正在尝试映射未定义的对象键。我们不知道您的回复数据是什么。您将regionsData定义为一个数组,但您正在执行此操作&#34; regionsData.States.map&#34;所以regionsData数组或对象?,设置你的初始状态&#34; regionsData:{states:[]}&#34;或者这样做&#34; regionsData.map&#34;。