0

Имеется серверная часть на NodeJs и клиентская на React. Со стороны сервера использую /api, где передаю полученные данные из mysql:

server.use('/api/getCatProduction', (req, res) => {
        res.setHeader('Content-Type', 'application/json');

        db.fetchData(models.prodCatQuery('zru'), (error, result) => {
            if(error) 
                console.log(error);
            else {
                res.json(result);
            }
        });
    });

В классе страницы получаю их так:

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

componentDidMount() {
    this.getData();
}

getData() {
    fetch('/api/getCatProduction', {
        headers : { 
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    }).then(response => response.json()).then(response => this.setState({data: response}));
}

При попытке вывода полученных значений средствами:

    const { data } = this.state;

    console.log(data[0].category_name);
    console.log(data[0][category_name]);
    console.log(data[0]["category_name"]);

Возникает ошибка

productions.js:32 Uncaught (in promise) TypeError: Cannot read property 'category_name' of undefined

И никак не могу разобраться в чем проблема... запутался в общем. Понимаю что решение кроется на самом видном месте, но... видно не судьба найте это самое место)

1 ответ 1

2

Изначально ваша data это пустой массив [].

Вы делаете асинхронный запрос в componentDidMount. При первом рендере ваш data будет пустым массивом. И вы хотите взять первый элемент массива и его ключи.

Для того чтобы такого не произошло, вам нужно перед console.log(data[0].category_name) сделать проверку: data.length !== 0

5
  • Здравствуйте, Илья! Спасибо за ответ. Дело в том, что когда происходит вызов просто data[0] или 1, 2... то я получаю определенную ветвь, без переменных которые лежат в ней. Да и по такому же принципу происходит обмен данными на других страницах, там все работает. То есть, как я понимаю, массив уже не может быть пуст. Но как только я пытаюсь забрать определенное значение из ветви, вылезает ошибка. Что это может еще быть?
    – Иван
    10 июн 2019 в 16:51
  • 1
    Если вы выведите в консоль data, то увидите о чем я говорю, ваш массив будет пустым 10 июн 2019 в 17:13
  • 1
    @Иван даю 100% гарантию что он пустой, т.к. в конструкторе вы его определяете как пустой массив, и только после первого рендера делаете асинхронный запрос. 10 июн 2019 в 20:46
  • Да, вы оказались правы. При первом рендере массив и правда инициализируется пустым, по этому и выводится ошибка. Разобрался, спасибо большое)
    – Иван
    11 июн 2019 в 5:43
  • @Иван не за что:) 11 июн 2019 в 8:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.