Невозможно установить компонент состояния реакции

Question

Я вызываю API, используя API-интерфейс fetch внутри моего реагирующего компонента, чтобы установить состояние. Это мой код.

class MyComponent extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { fullName: null, uid: null }; 

    } 
    componentWillMount(){ 

    fetch(url) 
     .then(
     function(response) { 
      if (response.status !== 200) { 
      console.log('Looks like there was a problem. Status Code: ' + 
       response.status); 
      return; 
      } 

      response.json().then(function(data) { 
      this.setState(fullName = data.first.givenName + " " + data.lastName, 
       uid =data.uid); 
      }); 
     } 
    ) 
     .catch(function(err) { 
     console.log('Fetch Error :-S', err); 
     }); 
    } 


    render() { 
    return (
     <div className="header"> 
     <nav className="navbar navbar-default navbar-fixed-top"> 
      <div className="navbar-header"> 
      <a className="navbar-brand" href="#"> {this.state.fullName}</a> 
      </div> 


      <div className="brand-right"> 
      <ul className="nav navbar-nav navbar-right"> 
       <li><a href="#">UID: {this.state.yguid} </a></li> 
      </ul> 
      </div> 
     </nav> 
     </div> 
    ); 
    } 
} 

export default MyComponent; 

Я получаю следующее сообщение об ошибке:

Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined 

Я не могу понять, почему SetState не работает. Если я console.log (data) внутри блока then, он выводит правильные данные, но затем выходит из строя в следующей строке. Как я могу сделать это правильно.

Answer 1

Функция, которую вы передаете в then, не привязана к текущему контексту, которые вызывают this внутри вашей функции обратного вызова, чтобы быть неопределенным, а не ссылаться на экземпляр компонента. Просто используйте bind(this) для связывания обратного вызова с компонентом, как это:

.then(function() { 
    // function body 
}.bind(this)); 

или вы можете использовать функцию стрелка, которая связывает контекст неявно:

.then(() => { 
    // function body 
}); 

Answer 2

Это происходит потому, что this, который вы используете при fetch не такой же, как this по классу MyComponent.

Попробуйте использовать arrow functions

fetch(url) 
    .then((response) => { 
    if (response.status !== 200) { 
     console.log('Looks like there was a problem. Status Code: ' + 
     response.status); 
     return; 
    } 

    response.json().then((data) => { 
     this.setState({ 
     fullName: data.first.givenName + " " + data.lastName, 
     uid: data.uid, 
     }); 
    }); 
    }) 
    .catch((err) => { 
    console.log('Fetch Error :-S', err); 
    }); 

Надеется, что это помогает!

Answer 3

Правильный способ установить состояние проходящий состояние как Объект. Например:

this.setState({ 
    fullName: data.first.givenName + " " + data.lastName, 
    uid: data.uid 
});