TypeError: Cannot read property 'map' of undefined react this.props.rsl['data']

问题

I'm facing an issue with the map function and it shows data in console log console.log("iiiiiiiiii",this.props.rsl['data']) but when I use map function {this.props.rsl['data'].map(row=>{}) , it throws a error saying

it throws error saying TypeError: Cannot read property 'map' of undefined

 render(){
    const {classes}=this.props;
     console.log("iiiiiiiiii",this.props.rsl['data'])
    return(
        <Paper className={classes.root}>
            <div className={classes.tableWrapper}>
                <Table>
                    <EnhancedTableHead rows={this.props.rowsHdr} />
                    {console.log("this.props.rowsHdr",this.props.rowsHdr)}
                    <TableBody>
                        {this.props.rsl['data'].map(row=>{
                            return(
                                <TableRow key={row.bankId}
                                  hover
                                  onClick={e=>console.log("e",e)}
                                >
                                    <TableCell>{row.bankName}</TableCell>
                                    <TableCell>{row.bankCode}</TableCell>
                                    <TableCell>{row.city}</TableCell>
                                    <TableCell>{row.country}</TableCell>
                                    <TableCell>{row.status}</TableCell>
                                    <TableCell>
                                        <Button variant="contained" className={classes.button} onClick={()=>this.handleViewProfile(row.bankCode)}>
                                            View
                                        </Button>
                                    </TableCell>
                                </TableRow>
                            )
                        })}                            
                    </TableBody>
                </Table>                    
            </div>
        </Paper>
    )
   }

  iiiiiiiiii 

  (4) [{…}, {…}, {…}, {…}]
   0: {status: "ACTIVE", zipcode: "500018", country: "India"}
    1: {status: "ACTIVE", zipcode: "500019", country: "India"}
   2: {status: "ACTIVE", zipcode: "500026", country: "India" }
   3: {status: "ACTIVE", zipcode: "500028", country: "India"}
   length: 4
   __proto__: Array(0)

the data is not rendering as its not mapping can anyone please guide me as to whats going wrong.

回答1:

When initial page loading, rsl get undefined and you can fix the issue in following way

{this.props.rsl && this.props.rsl['data'].map(row => { ........... })

回答2:

I ran into this same problem in a React app I'm working on. I'm not sure I understand why this works, but when I gave the array a default value of a blank array before attempting to map over it, I was able to map over its contents in my component.

In my example, the original assignment looked like this:

 let { img, title, description, games } = this.state.eventData;

Then, I attempted to map over the games array like this:

 <h3>Games:</h3>
    <ul>
      {games.map(g => <li>{g.name}</li> )}
    </ul>

When attempting the code above, where I assign from the eventData

object and don't set a default, I get an error saying games is undefined.

But when I changed it to this, it worked:

 let { img, title, description, games=[] } = this.state.eventData;

 <h3>Games:</h3>
    <ul>
      {games.map(g => <li>{g.name}</li> )}
    </ul>

Hope this helps you, and/or future folks googling this answer!

来源：https://stackoverflow.com/questions/54085276/typeerror-cannot-read-property-map-of-undefined-react-this-props-rsldata