無法讀取未定義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獲取信息並使用它制作表格，但出現了一些錯誤。

無法讀取未定義的屬性“地圖”

我該如何處理？

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

Answer 2

您正在設置。 state .lista包含數組數據。

您正在嘗試對此進行映射。 props .lista。

this.state！== this.props。

更改this.props.lista.map到this.state.lista.map ，它應該工作。

Answer 3

您的代碼有幾個問題。 嘗試解決這些問題：

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

Answer 4

您正在設置對代碼中不存在的狀態變量數據的響應。 您需要將其設置為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>

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

Answer 5

我看到您已使用該數組lista[]設置了初始狀態。 您是否也有一個像道具那樣傳遞的數組？ 如果是，請檢查拼寫錯誤，您可能還希望將構造函數與props參數一起使用，這樣您將在超級調用中進行傳遞

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

Answer 6

據我所知，給定的代碼有2個問題，

第一個：

當實際數組是this.state.lista時，您正在this.props.lista上運行Array.prototype.map() 。

另外， componentDidMount()在render()函數之后運行，因此將fetch()移至constructor或為map函數設置條件

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