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

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

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, он выводит правильные данные, но в следующей строке происходит сбой. Как я могу сделать это правильно.


reactjs javascript fetch-api
person Community    schedule 03.11.2016    source источник

Ответы (3)


arrow_upward
3
arrow_downward

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

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

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

.then(() => {
  // function body
});
person Konstantin Vitkovsky    schedule 03.11.2016

arrow_upward
0
arrow_downward

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

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

arrow_upward
0
arrow_downward

Это происходит потому, что 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);
  });

Надеюсь это поможет!

person Pranesh Ravi    schedule 03.11.2016