描述：我正在制作一个react原生应用程序，其中我有一个我正在关注的github用户列表，我想实现取消关注和刷新列表的功能。
我制作了两个异步助手来与github API交互，一个用于取消对用户的关注(通过PUT)，另一个用于获取关注列表(通过get)。我还在以下组件的列表中添加了一个firebase监听器。每一个关注都会引导我进入一个由取消关注按钮组成的个人资料视图。当我点击一个按钮时，它应该取消对用户的关注，更新组件中的以下列表，然后导航回以下组件的列表。
问题不允许用户按预期工作，但以下视图的列表仍然包含旧列表。我的代码正在返回旧数据，尽管githubapi正在返回新的更新数据，所以我怀疑问题一定是我使用async/await的方式。
我甚至制作了一个刷新按钮来刷新下面的列表，但新数据有时只会被返回，比如1/20次。
UPDATE：在测试了多个场景后，我不认为firebase是问题所在，因为fetch正在返回相同的旧数据。我认为主要问题可能在于fetch调用。我也测试过从Postman获取数据，它可以获取正确的数据。
由于response.json()包含旧数据，fetch似乎没有按预期工作。我在这里做了一个简单的jsfiddle(您需要提供自己的访问令牌)，它显示get_following -> unfollow -> get_following成功工作，也就是说修改了以下数据。然而，在我的应用程序中，fetch在unfollow之前返回相同的旧数据，尽管github网站UI显示了更改，Postman返回了新的修改数据。我还更新了一些代码。
代码
以下列表
/**
* Listens for any changes on the database and updates the
* dataSource accordingly.
* @param {Firebase Object} ref
*/
_listenForData(ref) {
ref.on('value', (snapshot) => {
this.setState({
dataSource: snapshot.val()
},
this.setState({
isLoading: false,
}));
});
}
componentDidMount() {
// Sets up the listener for realtime changes.
GithubApi.get_followings(this.ref)
.then(_ => this._listenForData(this.ref));
}
带有取消跟随按钮的个人用户
async unfollow() {
try {
let success = await GithubApi.unfollow_user(this.state.login);
console.log('unfollowed user');
console.log(success);
if (success) {
// Updates database after unfollowing
console.log('update followings')
await GithubApi.get_followings(this.ref);
return true;
}
} catch (error) {
console.error(error);
return false;
}
}
render() {
const { goBack } = this.props.navigation;
return (
<Button
title='Unfollow'
onPress={
() => this.unfollow().then(_ => goBack())
}
/>
)
}
Github Api帮助程序
const GithubApi = {
url: 'https://api.github.com/',
access_token: ...,
/**
* An asychronous helper function to grab data from github
* given an url and add data the firebase.
*
* @param {string} url
* @param {Firebase Object} firebaseRef
*/
_get_data_from_github_with_firebase: async function(url, firebaseRef) {
try {
let response = await fetch(url);
let responseStatus = await response.status;
let responseJson = await response.json();
if (responseStatus === 200) {
firebaseRef.set(responseJson,
(error) => {
if (error) {
console.log(error);
return false;
} else {
return true;
}
});
}
return false;
} catch (error) {
return false;
}
},
/**
* Gets the user's following data and adds it to the database.
* @param {Firebase Object} firebaseRef
*/
get_followings: async function(firebaseRef) {
return await this._get_data_from_github_with_firebase(
this.url + 'user/following?' + this.access_token,
firebaseRef
);
},
unfollow_user: async function(username) {
try {
let url = this.url + 'user/following/' + username + '?' + this.access_token;
let response = await fetch(url, { method: 'DELETE'});
let responseStatus = await response.status;
if (responseStatus === 204) {
return true;
}
return false;
} catch (error) {
return false;
}
},
试试这个：
let response = await fetch(url, {
headers: {
'Cache-Control': 'no-cache'
}
});
您在_get_data_from_github_with_firebase中缺少await。尝试将功能更改为：
_get_data_from_github_with_firebase: async function(url, firebaseRef) {
try {
let response = await fetch(url);
let responseStatus = await response.status;
let responseJson = await response.json();
var result = false
if (responseStatus === 200) {
result = await firebaseRef.set(responseJson,
(error) => {
if (error) {
console.log(error);
return false;
} else {
return true;
}
});
}
return result;
} catch (error) {
return false;
}
},
注意我强烈建议您使用redux saga进行同步操作。
你是不是曾经的C开发人员？或者您习惯于通过引用传递变量？
我认为你的问题是，在这个函数中，你试图通过引用返回一个值：
_get_data_from_github_with_firebase: async function(url, firebaseRef) {
try {
let response = await fetch(url);
let responseStatus = await response.status;
let responseJson = await response.json();
var result = false
if (responseStatus === 200) {
result = await firebaseRef.set(responseJson, //You are executing a method by reference
(error) => {
if (error) {
console.log(error);
return false;
} else {
return true;
}
});
}
return result;
} catch (error) {
return false;
}
},
也许一个更专业的JS开发人员可以确认这是否可行，但我不习惯这样做。我会更改签名并返回responseJson，而不是尝试这样设置。
responseJson可能在该函数内部有一个值，但在外部未定义。