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

【问题标题】：React JS cannot read property 'map' of undefinedReact JS 无法读取未定义的属性“地图”
【发布时间】：2020-02-11 13:48:20
【问题描述】：

我想从api中获取数据，并将其设置为状态，并在map中使用它进行迭代

    const result = await API.getSearch(data);

    if(result.status === 200){
        this.setState({data: result.data, loading: false })
    }

    const result = await API.getSearch(data); // got data successfully

然后：

this.state.data && this.state.data.length > 0 && this.state.data.data.map(function(value, i){

我知道这种错误的意思，map没有得到任何数据，所以我使用条件，首先检查状态是否返回数据，然后检查数据是否有长度，但仍然得到这个错误。有什么解决办法吗？

【问题讨论】：

您正在检查this.state.data，但您正在使用this.state.data.data.map
.data 太多了
@Titus 不不不！ this.state.data ，这是状态名称，当返回数据时，有一个对象/array 叫data
@messerbill 阅读以上评论
咻咻咻！ this.state.data.data.map 有一个 .data 太多了 ;)

标签： javascript reactjs

【解决方案1】：

看起来你还没有初始化data。所以，第一次渲染时，是undefined。 在undefined，map 不存在。导致此问题。

像下面这样声明和定义data

this.state = {
    data: []
}

或

constructor(props) {
    this.state = {
        data: []
    }
}

【讨论】：

【解决方案2】：

我猜不是这个

this.state.data.data.map(function(value, i){

应该只有一次数据

this.state.data.map(function(value, i){

【讨论】：

no no no，api返回json数据，有个数组叫data

【解决方案3】：

使用解构获得默认值并确保内部data 是数组

    const { data : { data = [] } = {} } = { data: { data: ['foo', 'bar']}  } ;
    
    console.log(data.map(x => x + "--").join());

【讨论】：