Question

当我从API提取数据并且想要对数据进行排序和显示时，我遇到了错误TypeError: Cannot read property 'sort' of undefined，我的sort函数适用于本地静态数据，但不适用于端点。

以下是排序功能

dynamicSort(property) {
        var sortOrder = 1;
        if(property[0] === "-") {
            sortOrder = -1;
            property = property.substr(1);
        }
        return function (a,b) {
            if(sortOrder == -1){
                return b[property].localeCompare(a[property]);
            }else{
                return a[property].localeCompare(b[property]);
            }        
        }
    }

下面是我的渲染方法

render() {
let data = this.props.brands.all_brands
data.sort(this.dynamicSort("name"));
console.log(data);
}

下面是我的JSON格式

{
"all_items": [
{"name": "Banana"},
{"name": "Cat"},
{"name": "Apple"}
]
}

Answer 1

JS此时尝试在变量sort()上调用undefined方法。我想您的道具目前没有通过。如果您确定随时将它们传递给组件，则只需添加一个if检查：

render() {
  let data = this.props.brands.all_brands
  if (data) data.sort(this.dynamicSort("name"));
  console.log(data);
  // return your template
}

Answer 2

远程数据是异步的，这意味着要花费一些时间才能获取它，因此您需要处理尚未收到的数据：

all_brands是未定义的，直到获取远程数据为止

render() {
    let data = this.props.brands.all_brands

    if (data) {
        data.sort(this.dynamicSort("name"));
        console.log(data);
    } else {
        return 'loading...'    
    }
}

无法读取reactjs

2 个答案: