无法读取未定义REACT的属性"map"

问题描述

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获取信息并使用它制作表格，但出现一些错误.

I'm trying to get info from the API and make a table with it but I'm getting some errors.

我该如何处理?

推荐答案

您正在设置对代码中不存在的状态变量数据的响应.您需要将其设置为lista，而不是在获取Api调用之类的数据时使用

You are setting response to a state variable data which doesn’t exist in your code. You need to set it to lista instead of data in fetch Api call like

    this.setState({lista : resData.results});

在这里进行条件检查并执行.map

And here do conditional check and do .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的地图

.map with 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>

这篇关于无法读取未定义REACT的属性"map"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！