Запрос Axios 'GET' находится на рассмотрении, но никогда не достигает сервера

Question

Я использую axios в своем приложении React для получения данных с моего сервера (узла). Мой запрос GET остается в ожидании в инструментах разработчика Chrome и не достигает сервера, если я обновляю приложение по указанному маршруту (например, http://localhost:3000/category/5d68936732d1180004e516cb). Однако, если я перенаправлю с домашней страницы, он будет работать.

Я пробовал разные варианты, чтобы убедиться, что мои ответы заканчиваются на стороне сервера.

С некоторыми сообщениями были связаны проблемы (например, запрос не достигает сервера , POST-запрос не достигает сервера ), но, к сожалению, в моей ситуации это не помогло.

Вот мой основной звонок в моем приложении реакции:

  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
    });
  }

Я не уверен, почему добавление setTimeout () работает для componentDidMount ().

Согласно документации componentDidUpdate(), это хорошо для обновлений netork, однако вам нужно сравнить предыдущие реквизиты с текущими реквизитами.

К сожалению, я не уверен, как обойти хак с setTimeout (), но, похоже, он работает.