类型错误：无法读取属性“地图”的未定义的反应this.props.rsl [“数据”]

Question

我现在面临的问题与地图功能，它显示在控制台日志console.log("iiiiiiiiii",this.props.rsl['data'])数据，但是当我使用地图功能{this.props.rsl['data'].map(row=>{})，它抛出一个错误说

它抛出错误说类型错误：无法读取的未定义的属性“地图”

 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)

数据不会渲染其不映射任何人都可以请指导我一下，怎么回事错了。

Answer 1

当初始页面加载，rsl得到不确定的，你可以在下面的方式解决这个问题

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

Answer 2

我碰到了同样的问题在应用程序做出反应我的工作。我不知道我理解为什么这个作品，但是当我给数组空数组的默认值尝试映射在它之前，我能够将其内容映射在我的组件。

在我的例子，原来的分配是这样的：

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

于是，我试图映射在游戏数组是这样的：

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

当尝试上面的代码，在那里我从eventData分配

对象不设置默认，我得到一个错误说games是不确定的。

但是，当我改成了这一点，它的工作：

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

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

希望这可以帮助你，和/或将来人们使用Google这个答案！