尝试在 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;
})
}
最佳答案
这里有两个问题:
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()
关于javascript - React - 无法使用带有 GitHub API 的 Axios 设置状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47497560/