Question

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

我在我的＆＃39; FetchRepos＆＃39;中进行Axios通话组件然后需要在我的主页＆＃39;组件传递语言参数。

它加载正常，因为我在console.log中记录了主页组件中的数据但是当我将函数置于设置状态时，我检查了React dev工具和＆＃39; repos＆＃39; state为null，当我为＆＃39; activeLanguage＆＃39;执行onClick方法时它只是删除了“回购”。来自州。

帮助将不胜感激。

主页组件

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

这里有2个问题：

1- axios函数返回一个承诺，所以即使承诺你的状态也不能正确设置。您必须使用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()

React - 无法使用Axios和GitHub API设置状态

1 个答案: