Undefined не является объектом

У меня проблема с установкой состояния для данных из ответа API выборки.

render() {
    function getCode(text) {
      fetch('url', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          "telephone": text, 
          "password": "123123"
        })
      }).then(response => response.json())
      .then(response => {
        console.info(this.state.text)
        console.info(this.state.uid)

        this.setState({uid : response["data"]["telephone"]})
        console.info(this.state.uid)
      // this.setState({uid: response["data"]["telephone"]})
      // console.info(this.state.uid); 
    })
  }

вот мой конструктор

constructor(props) {
   super(props);
   this.state = {
      text: '',
      uid: ''
   }
}

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

TypeError: undefined is not an object (evaluating '_this2.state.text')]

Строки кода, которые прокомментированы, являются моими попытками исправить это.

УПД 1: вот ответ от APi

{"data":{"telephone":["Some data"]}}

Не могли бы вы включить весь компонент? Наличие функции getCode в методе рендеринга выглядит немного странно.

Tholle 23.02.2019 20:10

Я предполагаю, что в вашем ответе может не быть «данные» или «телефон».

Andus 23.02.2019 20:17

@somsgod, на что это ссылается? А как сделать чтобы ссылались на этот класс?

Riza Mk 23.02.2019 20:19

позвольте мне увидеть структуру данных ответа. зарегистрируй это

Bonjov 23.02.2019 20:19

Перед функцией getCode попробуйте var that = this; И внутри ответа используйте that.setState. Но поскольку используется функция стрелки, это должно было сработать. Но вы все равно можете попробовать это.

somsgod 23.02.2019 20:20

вы должны получить до того, как компонент будет смонтирован... используйте метод жизненного цикла componentDidMount

Bonjov 23.02.2019 20:22

@Tholle, там более 100 строк, не уверен, что могу опубликовать это здесь, я имею в виду правила stackoverflow.

Riza Mk 23.02.2019 20:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
7
1 598
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Проблема в том, что вы создаете функцию внутри метода, а this внутри функции не относится к this в вашем методе.

render() {
  function getCode(text) {
    // `this` in here is not the React component
  }
}

Вот простой пример:

class Example {
  method() {
    // `this` within a method (invoked via `.`) points to the class instance
    console.info(`method=${this}`);
   
    function functionInAMethod() {
      // because functionInAMethod is just a regular function and
      // the body of an ES6 class is in strict-mode by default
      // `this` will be undefined
      console.info(`functionInAMethod=${this}`);
    }
    
    functionInAMethod();
  }
}

new Example().method();

Вы можете просто извлечь getCode как другой метод класса и вызывать this.getCode() при необходимости.

getCode() {
  // ...
}

render() {
  this.getCode();
}

Другие варианты:

  1. bindthis из getCode при создании функции
  2. используйте call или [apply][3], чтобы установить this при вызове функции
  3. используйте стрелочная функция для getCode до сохранить this во вложенных функциях
  4. привяжите this к переменной в render и используйте эту переменную внутри getCode вместо this

⚠ Примечание: Вы не хотите делать http-запросы в методе render, потому что он вызывается довольно часто, подумайте о том, чтобы сделать его менее хрупким. Обычно это делается в конструкторе или componentDidMount.

Ответ принят как подходящий

вы объявляете эту функцию, когда компонент монтируется внутри функции рендеринга

 class Something extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        text: '',
        uid: ''
      }
  }

   getCode = (text) => {
      fetch('url', {
        method: 'POST',
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          "telephone": text, 
          "password": "123123"
        })
      }).then(response => response.json())
      .then(response => {
        console.info(this.state.text)
        console.info(this.state.uid)

        this.setState({uid : response.data.telephone})
        console.info(this.state.uid)
      // this.setState({uid: response["data"]["telephone"]})
      // console.info(this.state.uid); 
      })
  }

  render() {
    return(
      //...you can call it this.getCode(/..../)
    )
  }

}

Другие вопросы по теме