Невозможно прочитать свойство 'sort' из undefined вactjs

Question

Я получаю следующую ошибку TypeError: Cannot read property 'sort' of undefined, когда я получаю данные из API и хочу отсортировать и отобразить данные, моя функция сортировки работает с локальными статическими данными, но не с конечной точкой.

Ниже приведена функция сортировки

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

Удаленные данные являются асинхронными, то есть для их получения требуется время, поэтому вам нужно разобраться со случаем, когда вы еще не получили его:

all_brands не определено, пока не будут получены удаленные данные:

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

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

Answer 2

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
}