Javascript 使用.map()错误遍历this.state的值
完全初学者反应。我正在尝试循环检查Javascript 使用.map()错误遍历this.state的值,javascript,reactjs,Javascript,Reactjs,完全初学者反应。我正在尝试循环检查this.state的值,我遇到了问题 constructor(props) { super(props); this.state = { stats: [] }; } //assume this part has no issue // I added it just to make my work more understandable axios.get(this.props.source) .then((resu
this.state的值,我遇到了问题
constructor(props) {
super(props);
this.state = { stats: [] };
}
//assume this part has no issue
// I added it just to make my work more understandable
axios.get(this.props.source)
.then((result) => {
this.setState({
stats: result
});
});
//这就是问题所在
render(){
return(
{this.state.stats.map(function(val,res){
console.log(val)
})})
}
我得到的错误是TypeError:this.state.stats.map不是函数
我想你错过了一些重要的东西。最好将异步请求放入ComponentDidMount
方法中
componentDidMount()在创建组件后立即调用
安装。需要DOM节点的初始化应该在这里进行。如果你
需要从远程端点加载数据,这是一个好地方
实例化网络请求
此外,在检查stats变量之前,最好先检查它是否存在
以下是一个完整的示例:
类CustomComponent扩展了React.Component{
建造师(道具){
超级(道具);
this.state={
统计数据:[]
};
}
组件安装(){
this.setState({stats:[1,2,3,4]})
}
渲染(){
const{stats}=this.state
返回(
{stats&&stats.map((val,res)=>{
console.log(val)
})}
)
}
}
ReactDOM.render(
,
document.getElementById('root'))
)
似乎统计数据并不像您想象的那样是数组。为了验证,我建议在使用它之前添加Array.isArray(this.state.stats)
。我还建议在初始化此变量时与调试器断开连接,以确保它将保留为数组。检查result
的值是否为数组本身。尝试console.logging结果
。当this.state.stats
不是数组{this.state.stats&&this.state.stats.map(…)}
@illiteratewriter时,通常会发生此错误。结果的值为json。像[{'name':'value','id':'number'},{'name':'value','id':'number'}]@Li357我想我不明白,请创建一个可复制的示例。你说“假设这部分没有问题”的所有这些随机位和bob都可能包含问题。实际上,简单地拥有一个构造函数和一个呈现函数并不会导致您描述的错误消息。axios部分与此问题无关。无论如何,谢谢你的建议。所以我猜你在渲染方法上做错了什么。我用一段代码更新了我的答案。可能是因为result
是一个JSON字符串或类似的字符串?有没有关于如何循环使用JSONCopy ajax result的更多建议