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

【问题标题】：React - Can't set state using Axios with GitHub APIReact - 无法使用带有 GitHub API 的 Axios 设置状态
【发布时间】：2017-11-26 15:09:45
【问题描述】：

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

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

它加载正常，因为我在主页组件中控制台记录了数据，但是当我将函数置于设置状态时，我检查了 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;
    })
}

【问题讨论】：

你的函数 fetchPopularRepos 什么都不返回，所以你只是将状态的 repos 属性设置为 undefined
您可以通过返回 axios get 的结果并在 React 组件中的另一个 then 语句中设置状态来解决此问题
关于一致性的公平点 KonradD。 @PatrickHund 你能进一步解释一下吗？我不明白为什么 fetchPopularRepos 什么都不返回，因为我已经做了一个 console.log 而不是 return 并且它获取了一个对象数组？其次我尝试了这个： activeLanguage(lang) { fetchPopularRepos(lang) .then((res) => { console.log(res) }) this.setState({ activeLanguage: lang }) } 但得到了这个错误： Uncaught TypeError:如果您能帮助解释为什么我会非常感激，则无法读取未定义的属性 'then'！
抱歉，我的手机无法写出正确答案。你几乎是对的，只需在 axios.get 之前添加“return”
@PatrickHund 哈哈没问题，伙计，这很有效，谢谢！如果您在通话后有时间并且如果您能解释为什么我需要添加退货会很麻烦：）如果不是，谢谢！

标签： javascript reactjs axios

【解决方案1】：

你有两个问题：

1- axios 函数返回一个promise，所以即使有了promise，你的状态也不会被正确设置。您必须使用 asyn/await 或将响应作为承诺处理，并在 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()

【讨论】：

感谢您的回复。当您说我没有返回任何想法时，我感到困惑 .then(function(res) { return res.data.items; }) 在我的代码中。这不是返回ajax请求的结果吗？
是的，但这将是 axios 的 get 函数的返回，请参阅.. 当您进行 axios.get() 时...这是一个函数调用..所以如果您不't return that result.. 不管你是否在 then 中返回一些东西.. 你没有返回任何东西。