Почему выдаёт ошибку при добавлении нового элемента в Array?

Question

[Nikita Shchypylov]

Почему-то при такой вариации кода я получаю

Table.js:21 Uncaught (in promise) TypeError: Cannot read property 'state' of undefined

createCheckboxes = () => {
    const data = this.props.pets[0];
    let state = this.state.animals;
    if (data) {
      Object.keys(data).map(function(keyName, keyIndex) {
        this.state.animals.push(data[keyName].animal);
      });
    }

    console.log(data);
  };

Но при данной вариации всё работает:

createCheckboxes = () => {
    const data = this.props.pets[0];
    let state = this.state.animals;
    if (data) {
      Object.keys(data).map(function(keyName, keyIndex) {
        state.push(data[keyName].animal);
      });
    }

    console.log(data);
  };

Почему? this.state.animals изначально такой :

state = {
    animals: []
  };

И еще вопрос - можно ли данный код как-то сократить?
Спасибо

Answer 1

[Антон Спирин]

state в react нельзя менять напрямую, надо использовать асинхронный метод setState.

createCheckboxes = () => {
  const data = this.props.pets[0] || {};
  const newAnimals = Object.values(data).map(el => el.animal);
 
  this.setState(({ animals }) => ({
    animals: [ ...animals, ...newAnimals ],
  }));
};

Ошибка из-за того, что вы используете к колбеке map не стрелочную функцию, а обычную и в ее контексте this в strict режиме ссылается на undefined. Со стрелочной функцией такой ошибки бы не было.

PS. Я вам советовал писать в state состояния фильтра и фильтровать массив при рендере. А вы все делаете наоборот. Неправильно используете библиотеку и функции массива. Вам надо документацию по react хорошо изучить и основы js подтянуть. Особенно возможности ES6 и экспериментальных фич используемых в react разработке.

Советую перед тем как будете отправлять работодателю свое тестовое задание, сбросить его сюда попинать.

Comments

[Максим]

про возможности es6 хорошо расписано у Кантора

[Nikita Shchypylov]

Спасибо!
Ну, я отправил, но не доделанное. Не представлял, как можно делать дальше.
Блин, обидно возвращаться к докам, когда уже есть какой-никакой бэк, хотя сам об этом думал.

[Антон Спирин]

Nikita Shchypylov, документация по react небольшая и к ней лучше обращаться пока не знаете библиотеку достаточно хорошо. В интернете есть много подборок вопросов по react, которые задают на собеседованиях и ответы на которые должен знать каждый разработчик:
https://www.edureka.co/blog/interview-questions/re...
https://www.toptal.com/react/interview-questions
https://www.interviewmocha.com/tests/reactjs-test-...

На русском:
https://proglib.io/p/react-js-interview/
https://medium.com/@kanby/вопросы-про-react-на-соб...
https://proglib.io/p/5-react-questions/

[Nikita Shchypylov]

Антон Спирин, Тебе бы значок "Реакт-эксперт" на Тостере дать :)
Спасибо

Answer 2

[Coder321]

Юзайте стрелочную функцию, в теперешнем варианте вы теряете контекст.