Cannot read property 'map' of undefined REACT

问题

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>

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

Cannot read property 'map' of undefined

how can I deal with it?

回答1:

I'd recommend doing a conditional rendering here, by checking lista property first, before mapping all data.

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

As well as you have a error in

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

As you need to set state for lista:resData.results, not data

回答2:

You're setting this.state.lista to contain array data.

You're trying to map over this.props.lista.

this.state !== this.props.

Change this.props.lista.map to this.state.lista.map and it should work.

回答3:

There are several problems with your codes. Try to fix these:

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

and...

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

回答4:

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

And here do conditional check and do .map

.map without return

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

回答5:

I see that you've set the initial state with that array lista[]. Do you have one array like that passed as a prop as well? If yes check for typos and you might also want to use the constructor with the props argument that you will pass in the super call like so

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

回答6:

As far as i can see, there are 2 problems with the given code,

the first one:

You are running the Array.prototype.map() on this.props.lista, when the actual array is this.state.lista

Also, componentDidMount() runs after the render() function, so either move the fetch() to the constructor or set a condition for you map function

Read https://reactjs.org/docs/react-component.html#mounting for better understanding of React.component's lifecycles

来源：https://stackoverflow.com/questions/52722680/cannot-read-property-map-of-undefined-react