React native React Redux:应用程序在触摸交互之前会被卡住
在我的React原生应用程序(在iOS上)中,我使用Redux和Redux Thunk来管理API请求的状态。当我最初像这样加载数据时:React native React Redux:应用程序在触摸交互之前会被卡住,react-native,redux,react-redux,redux-thunk,react-native-ios,React Native,Redux,React Redux,Redux Thunk,React Native Ios,在我的React原生应用程序(在iOS上)中,我使用Redux和Redux Thunk来管理API请求的状态。当我最初像这样加载数据时: componentDidMount() { this.props.fetchFirstData(); } 应用程序卡住了。我在日志中看到,请求挂起的操作被调度,但之后什么也没有发生。只有在我在屏幕上进行任何触摸交互之后,请求成功操作才会被调度,并且一切正常。作为一种解决方法,我调用如下函数,该函数按预期工作: render() {
componentDidMount() {
this.props.fetchFirstData();
}
应用程序卡住了。我在日志中看到,请求挂起的操作被调度,但之后什么也没有发生。只有在我在屏幕上进行任何触摸交互之后,请求成功操作才会被调度,并且一切正常。作为一种解决方法,我调用如下函数,该函数按预期工作:
render() {
if (this.props.requests.length === 0) {
this.props.fetchFirstData();
}
但我想找出问题所在。我的actions.js
看起来像这样,但我认为错误并不在这里
function foiRequestsError(error) {
return {
type: 'FOI_REQUESTS_ERROR',
error,
};
}
function foiRequestsPending() {
return {
type: 'FOI_REQUESTS_PENDING',
};
}
function foiRequestsSuccess(requests) {
return {
type: 'FOI_REQUESTS_SUCCESS',
requests,
};
}
function foiRequestsFetchData(url) {
return dispatch => {
dispatch(foiRequestsPending());
fetch(url)
.then(response => {
if (!response.ok) {
throw Error(response.status);
}
return response;
})
.then(response => response.json())
.then(requests => dispatch(foiRequestsSuccess(requests)))
.catch(error => dispatch(foiRequestsError(error.message)));
};
}
const ORIGIN = 'XXX';
function foiRequestsFetchFirstData() {
return foiRequestsFetchData(`${ORIGIN}/XXX`);
}
function foiRequestsFetchMoreData(nextUrl) {
return foiRequestsFetchData(`${ORIGIN}${nextUrl}`);
}
export { foiRequestsFetchFirstData, foiRequestsFetchMoreData };
结果发现远程调试存在问题:setTimeout修复了该问题:
fetch(url)
.then(response => {
if (!response.ok) {
throw Error(response.status);
}
setTimeout(() => null, 0); // workaround for issue-6679
return response;
})