javascript - React - 无法使用带有 GitHub API 的 Axios 设置状态

Question

尝试在 React 中使用 Axios 设置一个简单的 AJAX 调用。

我在我的“FetchRepos”组件中进行 Axios 调用，然后在我的“主页”组件中要求它传递一个语言参数。

它加载正常，因为我在 Homepage 组件中控制台记录了数据，但是当我将函数置于设置状态时，我检查了 React 开发工具并且“repos”状态为空，当我为“activeLanguage”执行 onClick 方法时它只是从状态中删除“repos”。

帮助将不胜感激。

首页组件

import React from "react";
import {fetchPopularRepos} from "./FetchRepos";

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

        this.state = {
            activeLanguage: 'all',
            repos: null
        }

        this.activeLanguage = this.activeLanguage.bind(this);
    }
    activeLanguage(lang) {
        this.setState({
            activeLanguage: lang,
            repos: fetchPopularRepos(lang)
        })

    }
    render() {
        var languages = ['all', 'ruby', 'javascript', 'python'];
        return (
            <div>
                {languages.map((lang) => {
                    return (
                        <li key={lang} onClick={this.activeLanguage.bind(null, lang)} style={lang === this.state.activeLanguage ? {color: 'red'} : null}>{lang}</li>
                    )
                })}
            </div>
        )
    }
}

FetchRepos 组件

var axios = require('axios');

export function fetchPopularRepos(language) {
    axios.get('https://api.github.com/search/repositories?q=stars:>1+language:'+ language + '&sort=stars&order=desc&type=Repositories')
    .then(function(res) {
        return res.data.items;
    })
}

Answer 1

这里有两个问题:

1- axios 函数返回一个 promise ，因此即使有 promise ，您的状态也不会正确设置。您必须使用 asyn/await 或将响应作为 promise 处理，并在 then 函数内设置状态。

async activeLanguage(lang) {
      this.setState({
          activeLanguage: lang,
          repos: await fetchPopularRepos(lang)
      })

}

2- 你必须从 fetchPopularRepos 函数返回一些东西，因为你的函数没有返回任何东西。请参阅下面的代码

BAD(不返回任何值)

function some(){
   var a = 1;
   var b = 2;
   var result = a + b
}

GOOD(返回一个值)

function some(){
   var a = 1;
   var b = 2;
   return a + b
}

所以，你返回一些东西是因为你想在你的代码的其他部分捕获任何结果。像这样:

ver result = some()