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

时间:2018-10-09 13:48:12

标签: javascript html5 reactjs html-table fetch

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

  

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

我该如何处理?

6 个答案:

答案 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的生命周期