javascript - 无法读取未定义 REACT 的属性“地图”

Question

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 获取信息并用它制作一个表格，但我遇到了一些错误。

无法读取未定义的属性“地图”

我该如何处理？

标签： javascripthtmlreactjshtml-tablefetch

Answer 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