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

【问题标题】：Cannot read property 'map' of undefined REACT无法读取未定义 REACT 的属性“地图”
【发布时间】：2019-03-14 07:54:36
【问题描述】：

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

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

我该如何处理？

【问题讨论】：

标签： javascript html reactjs html-table fetch

【解决方案1】：

您正在设置对代码中不存在的状态变量数据的响应。您需要将其设置为 lista 而不是 fetch 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>

【讨论】：

不客气。请投票并接受哪个解决方案可以帮助您解决问题。以便对未来的读者有所帮助

【解决方案2】：

您的代码存在几个问题。尝试解决这些问题：

 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>
      );
    })
  }

【讨论】：

是的，整个问题实际上是 setState！谢谢大哥！
@GabrielTeixeira 我很高兴听到这个消息

【解决方案3】：

据我所知，给定的代码有两个问题，

第一个：

当实际数组为this.state.lista 时，您正在this.props.lista 上运行Array.prototype.map()

另外，componentDidMount() 在render() 函数之后运行，所以要么将fetch()移动到constructor，要么为你的地图功能设置一个条件

阅读 https://reactjs.org/docs/react-component.html#mounting 以更好地了解 React.component 的生命周期

【讨论】：

【解决方案4】：

我看到您已经使用该数组lista[] 设置了初始状态。你也有一个像这样的数组作为道具传递吗？如果是，请检查拼写错误，您可能还想使用带有props 参数的构造函数，您将像这样在超级调用中传递该参数

constructor(props){
     super(props);
     .......
}

【讨论】：

【解决方案5】：

您正在设置 this.state.lista 以包含数组数据。

您正在尝试映射 this.props.lista。

this.state !== this.props.

将this.props.lista.map 更改为this.state.lista.map，它应该可以工作。

【讨论】：

【解决方案6】：

我建议在这里进行条件渲染，首先检查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

【讨论】：