Невозможно обновить состояние путем извлечения данных из внешнего API

Question

Я делаю небольшое приложение, в котором я получаю данные из внешнего API github и обновляю состояние, но получаю сообщение об ошибке, которое говорит, что не может прочитать свойство null.Я сделал два файла, в которых api.js извлекает данные из внешнего API github, как показано в коде.и файл Results.js обновляет состояние соответственно.Ниже я прикрепил скриншот ошибки.Может кто-нибудь, пожалуйста, помогите мне определить проблему в моем коде.

код ::

api.js

import axios from 'axios';

var id = "YOUR_CLIENT_ID";
var sec = "YOUR_SECRET_ID";
var params = "?client_id=" + id + "&client_secret=" + sec;

function getProfile (username) {
  return axios.get('https://api.github.com/users/' + username + params)
    .then(function (user) {
      return user.data;
    });
}

function getRepos (username) {
  return axios.get('https://api.github.com/users/' + username + '/repos' + params + '&per_page=100');
}

function getStarCount (repos) {
  return repos.data.reduce(function (count, repo) {
    return count + repo.stargazers_count
  }, 0);
}

function calculateScore (profile, repos) {
  var followers = profile.followers;
  var totalStars = getStarCount(repos);

  return (followers * 3) + totalStars;
}

function handleError (error) {
  console.warn(error);
  return null;
}

function getUserData (player) {
  return axios.all([
    getProfile(player),
    getRepos(player)
  ]).then(function (data) {
    var profile = data[0];
    var repos = data[1];

    return {
      profile: profile,
      score: calculateScore(profile, repos)
    }
  });
}

function sortPlayers (players) {
  return players.sort(function (a,b) {
    return b.score - a.score;
  });
}

export default {
  battle: function (players) {
    return axios.all(players.map(getUserData))
      .then(sortPlayers)
      .catch(handleError);
  },

  fetchPopularRepos: function (language) {
    var encodedURI = window.encodeURI('https://api.github.com/search/repositories?q=stars:>1+language:'+ language + '&sort=stars&order=desc&type=Repositories');

    return axios.get(encodedURI)
      .then(function (response) {
        return response.data.items;
      });
  }
};

Results.js

import React from 'react';
import queryString from 'query-string';
import api from '../utils/api';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

function Player (props) {
   return (
      <div>
         <h1 className='header'> {props.label} </h1>
         <h3 style={{textAlign: 'center'}}> Score: {props.score} </h3>
      </div>
   )
}

Player.propTypes = {
   label: PropTypes.string.isRequired,
   score: PropTypes.number.isRequired,
   profile: PropTypes.object.isRequired
}

class Results extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         winner: null,
         loser: null,
         error: null,
         loading: true
      }
   }

   componentDidMount() {
    var players = queryString.parse(this.props.location.search);

    api.battle([
      players.playerOneName,
      players.playerTwoName
    ]).then(function (players){
      if (players === null) {
        return this.setState(function () {
          return {
            error: 'Looks like there was an error. Check that both users exist on Github.',
            loading: false,
          }
        });
      }

      this.setState(function () {
        return {
          error: null,
          winner: players[0],
          loser: players[1],
          loading: false,
        }
      });
    }.bind(this));
   }

   render () {
      var error = this.state.error;
      var winner = this.state.winner;
      var loser = this.state.loser;
      var loading = this.state.loading;

      if(loading === true){
         <p> Loading !! </p>
      }

      if (error) {
        return (
          <div>
            <p>{error}</p>
            <Link to='/battle'>Reset</Link>
          </div>
        )
      }

      return (
        <div className='row'>
          <Player
            label='Winner'
            score={winner.score}
            profile={winner.profile}
          />
          <Player
            label='Loser'
            score={loser.score}
            profile={loser.profile}
          />
        </div>
      )
    }
}

export default Results;

ошибка:

Answer 1

this.state.winner равно нулю до завершения выборки, что вызывает ошибку.

Вместо этого сначала установите {}, чтобы попытка доступа к его свойству не вызвала ошибку:

this.state = {
  winner: {},
  // insert other states
}