我试图在用户单击按钮时从某个类别中获取帖子，但如果您单击该按钮两次，UI(交互元素、导航)会完全卡住几秒钟。

我尝试删除 async/await 并使用 promises 进行操作，结果相同。

const api = axios.create({
  baseURL: 'http://192.168.1.33:5000/',
  timeout: 3000,
});
// Action
export const getTrends = () => async (dispatch) => {
  dispatch({
    type: actions.REQUEST_TRENDS
  });
  const r = await api.post('getTrends');
  const response = r.data;
  return dispatch({
    type: actions.RECEIVE_TRENDS,
    articles: response.payload.data,
    count: response.payload.count
  });
};

// Button
            <Button
              vertical
              active={tab === 'trends'}
              onPress={() => {
                this.setState({ tab: 'trends' });
                this.reqTrends();
              }}
            >
              <Icon name="md-trending-up" />
              <Text>{i18n.t('TRENDING')}</Text>
            </Button>

// reqTrends
async reqTrends() {
    this.props.dispatch(getTrends());
}

预期结果:数据在后台加载，同时用户仍然可以与其他元素交互

实际结果:用户必须等待请求完成才能使用其他任何东西

最佳答案

改变状态总是异步的。一旦通过尝试以下操作设置了状态，您可能无法继续进行 ajax 调用:

onPress={() => {
   this.setState({ tab: 'trends' }, () => this.reqTrends());
}}

这可确保流程不会重叠或产生内存泄漏。

另一个因素是您通常应该将 Async 函数包装在 try/catch block 中。错误可能是在它自身的函数内部出现的。

关于javascript - 使用 axios 向服务器发出请求会卡住 React Native 应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57182607/