Question

我正在React应用上使用axios从服务器（节点）获取数据。我的GET请求在chrome开发人员工具中处于待处理状态，如果我按照提供的路由（例如http://localhost:3000/category/5d68936732d1180004e516cb）刷新应用程序，则该请求不会到达服务器。但是，如果我从主页重定向，它将起作用。

我尝试了各种变体，以确保我在服务器端结束响应。

几个帖子都有相关的问题（例如request not reaching the server，POST request does not reach the server），但不幸的是，这对我的情况没有帮助。

这是我的React应用程序中的主要电话：

  componentDidMount() {
    console.log('I am here!'); // this gets executed even on page refresh
    axios.get(`/api/categories/${this.props.id}`)
      .then( (res) => {
        this.setState({
          title: res.data.category.title,
          module: res.data.category.module ? true : false,
          ...res.data
        })
      }, (err) => console.log(err))
      .catch(err => console.log(err));
  }

在后端，经过用户验证后，我调用此函数：

module.exports.publishedCategories = async function(req, res) {
  try {    
    // some code that I removed for clarity
    res.json({
      category,
      children,
      flagged: flaggedCategories
    });
  } catch(err) {
       console.log(err);
       res.sendStatus(500).end();
    }
}

有关我的路由的更多代码：

index.js

<Route
    path='/category/:id'
    render={ (props) => {
       return <Category id={props.match.params.id} />
    }}
/>

我没有收到任何错误消息...

Answer 1

我对切换到componentDidUpdate()的最初解决方案非常热心。这仅适用于页面刷新，而不适用于重定向（即，我遇到了相反的问题）。我的最终解决方案如下：

  componentDidMount = async () => {
    setTimeout( async () => {
      this.loadCategory();
    }, 10)
  }

  componentDidUpdate = async (props, state) => {
    if(props.match.params.id !== this.props.match.params.id) {
      this.loadCategory();
      return;
    }
    return false;
  }

  loadCategory = async () => {
    let result = await axios.get(`/api/categories/${this.props.match.params.id}`);
    this.setState({
      title: result.data.category.title,
      module: result.data.category.module ? true : false,
      ...result.data
    });
  }

我不确定为什么要为componentDidMount（）添加setTimeout（）。

根据文档componentDidUpdate()，这对于netork更新非常有用，但是您需要将先前的道具与当前的道具进行比较。

不幸的是，我不确定如何解决setTimeout（）hack，但它似乎可以正常工作。

Axios的“ GET”请求正在等待处理，但从未到达服务器

1 个答案: