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获取信息并使用它制作表格,但出现一些错误。
无法读取未定义的属性“地图”
我该如何处理?
答案 0 :(得分:1)
我建议在这里进行条件渲染,方法是在映射所有数据之前先检查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
设置状态
答案 1 :(得分:1)
您正在为此设置。state
。lista包含数组数据。
您正在尝试对此进行映射。props
。lista。
this.state!== this.props。
将this.props.lista.map
更改为this.state.lista.map
,它应该可以工作。
答案 2 :(得分:1)
您的代码有几个问题。尝试解决这些问题:
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>
);
})
}
答案 3 :(得分:1)
您正在设置对代码中不存在的状态变量数据的响应。您需要将其设置为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>
.return的地图
<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>
答案 4 :(得分:0)
我看到您已经使用数组lista[]
设置了初始状态。您是否也有一个像道具那样传递的数组?如果是,请检查拼写错误,并且您可能还希望将构造函数与props
参数一起使用,这样您就可以在超级调用中进行传递
constructor(props){
super(props);
.......
}
答案 5 :(得分:0)
据我所知,给定的代码有2个问题,
第一个:
当实际数组为Array.prototype.map()
时,您正在this.props.lista
上运行this.state.lista
此外,componentDidMount()
在render()
函数之后运行,
因此将fetch()
移至constructor
或为您的映射函数设置条件
阅读https://reactjs.org/docs/react-component.html#mounting,以更好地了解React.component的生命周期