Использование this.props.history.push ("/ path") выполняет повторный рендеринг, а затем возвращает

Question

Отредактировал вопрос после дальнейшей отладки

У меня странная проблема, некоторое время пытался ее решить, но не могу.

У меня есть React Component с именем NewGoal.jsx, после того как пользователь отправляет свою новую цель, я пытаюсь перенаправить его на страницу «цели». Проблема: после отправки браузер загружается на страницу цели, но только на одну секунду. Затем он продолжается и возвращается на страницу NewGoal! Я пытаюсь понять, почему это происходит, я начинаю чувствовать, что это может быть асинхронной проблемой. Вот мой код, в настоящее время он использует async-await, я также попробовал ту же идею, используя .then(), но он также не работал:

 async handleSubmit(event)
 {
   const response = await axios.post("http://localhost:8080/addGoal", 
    {
       goalID: null,
       duration: this.state.days,
       accomplishedDays: 0,
       isPublic: this.state.isPublic,
       description: this.state.name,
       dateCreated: new Date().toISOString().substring(0,10),

     }) */
   // push to route 
     this.props.history.push("/goals");   
  }

Во время отладки я попытался удалить функциональность, в которой я публикую новое сообщение, и просто сделал файл history.push, код приведен ниже - и это полностью сработало.

      // THIS WORKS
    async handleSubmit(event)
    {
         // push to route 
          this.props.history.push("/goals");    
    }

Но как только я добавляю что-либо еще в функцию, будь то до history.push или после, она перестает работать. Любой совет будет очень очень признателен! Спасибо

Answer 1

В документации по React Router разработчики рассказывают о том, как объект истории изменчив.Их рекомендация не состоит в том, чтобы изменять это напрямую.

https://reacttraining.com/react-router/web/api/history#history-history-is-mutable

К счастью, есть несколько способов программно изменить местоположение пользователя, все еще работая в событиях жизненного цикла React.

Самое простое, что я нашел, также самое новое.React Router использует React Context API, чтобы сделать объект истории, используемый маршрутизатором, доступным для его потомков.Это избавит вас от передачи объекта истории по дереву компонентов через реквизиты.

Единственное, что вам нужно сделать, - убедиться, что ваш AddNewGoalPage использует объект истории из context вместо реквизита.

handleSubmit(event)

    ...

    //successful, redirect to all goals
    if(res.data)
    {
      this.context.history.push("/goals")
    }

    ...
  })

}

Я не знаю, используете ли вы компонент класса или функциональный компонент для AddNewGoalPage - но ваш метод handleSubmit намекает, что он является членом класса, поэтомуобъект истории маршрутизатора будет автоматически доступен вам в вашем классе через this.context.history.

Если вы используете функциональный компонент, вам нужно убедиться, что метод handleSubmit правильно привязан к функциональному компоненту, в противном случае context параметр функционального компонента, заданный React, не будетдоступно для него.

Не стесняйтесь отвечать мне, если это так.