Компонент перенаправления React не работает должным образом в Axios .then () обещание

Question

У меня есть реагирующий маршрутизатор со следующими маршрутами:

'/' = Мой основной компонент приложения '/ create' = Мой дополнительный вид

В моем представлении Создать в onClick кнопки Iвыполнить вызов axios.post для публикации объекта JSON в имеющемся у нас API.

После его успешного завершения я установил переменную состояния ReturnToHome, используя Reacts setState ({ReturnToHome: true})

Inмой метод визуализации у меня есть:

if (this.state.ReturnToHome) { return ( <Redirect to='/' /> )};

ВАЖНО: Вот интересная вещь, с которой я борюсь:

1) Когда этот же вызов this.setState НЕ находится в .then ofобещание axios перенаправление работает безупречно 2) Когда this.setState находится внутри. затем обещания, оно не работает.

Я подумал, возможно, сначала это может быть проблемой с областью видимости, поэтому я сохранилэто для pThis и специально использовало pThis в .then, но это не имело положительного эффекта.

ТАКЖЕ ОТМЕТЬТЕ: Когда я впервые перехожу к своему представлению, путь: # / create.После того, как я обновлю состояние с помощью перенаправления, путь будет # # create ... Я не уверен, что это уместно, но надеюсь, что это может быть подсказка.

Любые идеи о том, почему это не такработай?Возможно, даже рабочий пример того, как это достигается в сценарии типа обещания?

Answer 1

Хорошо, я нашел разрешение.В конце я сузил его до одного поля, которое я модифицировал.Каждый раз, когда я изменял поле, приложение демонстрировало это странное поведение.

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

Все стало работать отлично.Если бы я только знал, почему ...

Полагаю, в ReactJS есть что-то, о чем я до сих пор не знаю.

Надеюсь, это кому-нибудь поможет!

Answer 2

1. Убедитесь, что вы обернули иерархию вашего приложения компонентом React-router <Switch> и правильно определили ваши маршруты, переключайтесь по возможным доступным путям, чтобы обрабатывать ошибки, используя переменную пути.
2. Лучше записывать условие в рендере, используя отметку &&.Например: return (this.state.ReturnToHome && <Redirect to="/" />), и это сделает работу.

Теоретически, при каждом обновлении состояния компонент должен обновляться и обновляться, и в конечном итоге будет отображаться, поэтому проблема не в функции рендеринга..

так вот пример для вашего случая:

export class App extends React.component {
.....
render() {
    return <ReactRouter>
                <Switch>
                      <Route exact path="/" render={homeComponent} />
                      <Route path="/create" render={createComponent}/></Switch> 
           </ReactRouter>
}
export class CreateComponent extends React.component {
    constructor(){
         this.state = {
              ReturnToHome: false
         }
         this.callToApi = this.callToApi.bind(this)
    }
    callToApi = e => {//e not required but always good to record event handlers......
        const self = this
        axios.post("apiuri",{params}..complete the post method requiremnets based on api..).then((response)=> {
            self.setState({ReturnToHome:true})
        })
    }
    render(){
         return ....some logic with buttons to start the callToApi method.....
         (this.state.ReturnToHome && <Redirect to="/" />)
}