[英]Cannot read property 'map' of undefined REACT
constructor(){
super();
this.state = {
lista: [],
}
}
componentDidMount(){
fetch('http://lospraianos-env-1.qu3skpxsmw.sa-east-1.elasticbeanstalk.com/api/materials')
.then(response => response.json())
.then(resData => {
this.setState( {data: resData.results});
})
}
<div>
<table className="pure-table">
<thead>
<tr>
<th>id</th>
<th>Produto</th>
<th>Quantidade</th>
</tr>
</thead>
<tbody>{
this.props.lista.map(function(data){
return (
<tr key={data.codMat}>
<td>{data.codMat}</td>
<td>{data.material}</td>
<td>{data.qntMin}</td>
</tr>
);
})
}
</tbody>
</table>
</div>
我正在尝试从API获取信息并使用它制作表格,但出现了一些错误。
无法读取未定义的属性“地图”
我该如何处理?
我建议在这里进行条件渲染,方法是在映射所有数据之前先检查lista
属性。
{
this.props.lista && this.props.lista.map(function(data){
return (
<tr key={data.codMat}>
<td>{data.codMat}</td>
<td>{data.material}</td>
<td>{data.qntMin}</td>
</tr>
);
})
}
以及您在
this.setState( {data: resData.results});
由于您需要为lista:resData.results
设置状态,而不是data
您正在设置。 state
.lista包含数组数据。
您正在尝试对此进行映射。 props
.lista。
this.state!== this.props。
更改this.props.lista.map
到this.state.lista.map
,它应该工作。
您的代码有几个问题。 尝试解决这些问题:
constructor(props) { //fixed
super(props); //fixed
this.state = {
lista: []
};
}
componentDidMount() {
fetch(
'http://lospraianos-env-1.qu3skpxsmw.sa-east-1.elasticbeanstalk.com/api/materials'
)
.then(response => response.json())
.then(resData => {
this.setState({ lista: resData.results }); //fixed
});
}
和...
{
this.state.lista.length > 0 && this.state.lista.map(function(data) { //fixed
return (
<tr key={data.codMat}>
<td>{data.codMat}</td>
<td>{data.material}</td>
<td>{data.qntMin}</td>
</tr>
);
})
}
您正在设置对代码中不存在的状态变量数据的响应。 您需要将其设置为lista而不是在获取Api调用中的数据,例如
this.setState({lista : resData.results});
在这里进行条件检查并执行.map
.map不返回
<tbody>{
this.props.lista && this.props.lista.map(data => (
<tr key={data.codMat}>
<td>{data.codMat}</td>
<td>{data.material}</td>
<td>{data.qntMin}</td>
</tr>
))
}
</tbody>
.map与返回
<tbody>{
this.props.lista && this.props.lista.map(data => {
return (<tr key={data.codMat}>
<td>{data.codMat}</td>
<td>{data.material}</td>
<td>{data.qntMin}</td>
</tr>)
})
}
</tbody>
我看到您已使用该数组lista[]
设置了初始状态。 您是否也有一个像道具那样传递的数组? 如果是,请检查拼写错误,您可能还希望将构造函数与props
参数一起使用,这样您将在超级调用中进行传递
constructor(props){
super(props);
.......
}
据我所知,给定的代码有2个问题,
第一个:
当实际数组是this.state.lista
时,您正在this.props.lista
上运行Array.prototype.map()
。
另外, componentDidMount()
在render()
函数之后运行,因此将fetch()
移至constructor
或为map函数设置条件
阅读https://reactjs.org/docs/react-component.html#mounting以更好地了解React.component的生命周期
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.