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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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