Как сохранить и передать новые значения состояния другому компоненту маршрутизатора в ReactJS

Question

У меня есть некоторые значения состояния, используемые в App.js, как показано ниже

constructor(){
  super()
  this.state = {
    text: "hello world"
  }
}

handleClick() {
    this.setState({text: "good morning})
}

render() {

    return (
        <BrowserRouter>
            <div>
                <Header />
                <Switch>
                    <Route exact path="/" component={() => <Home handleClick={this.handleClick()} {...this.state}/>} />
                    <Route path="/login" component={Login} {...this.state}/>
                    />
                </Switch>
            </div>
        </BrowserRouter>
    );
}

Внутри моего компонента Home у меня есть функция нажатия кнопки, и при нажатии функция handleClick вызовет и состояниезначение изменится.Я хочу сохранить новое значение состояния и передать его компоненту login, а также компоненту Home после завершения процесса входа в систему.

Прямо сейчас, когда я перехожу к /login и возвращаюсь к /, значение состояния по умолчанию попадает внутрь компонента Home.

Значение состояния меняется на новое значение приonClick, и с этим нет проблем.У меня есть методы привязки, добавленные в App.js для функций.

Как сохранить новое значение состояния для использования внутри компонента Home после вызова другого маршрутизатора?

Answer 1

Вам нужно либо связать функцию в конструкторе, либо использовать вместо нее функции-стрелки.Кроме того, вам нужно только передать ссылку на функцию, не вызывая ее.Это означает, что вы не можете использовать () при передаче его в качестве опоры.И последнее: вы передавали деструктурированное состояние компоненту Route вместо компонента Login.

constructor(){
  super()
  this.state = {
    text: "hello world"
  }

  // binding in constructor not needed if using arrow function
  this.handleClick = this.handleClick.bind(this);
}

// arrow function not needed if binding in constructor
handleClick = () => {
    this.setState({text: "good morning})
}

render() {

    return (
        <BrowserRouter>
            <div>
                <Header />
                <Switch>
                    <Route
                      exact
                      path="/"
                      component={() => (
                        <Home 
                          // important: this.handleClick without ()
                          handleClick={this.handleClick}
                          {...this.state}
                        />
                      )}
                    />
                    <Route
                      path="/login"
                      component={() => (
                        <Login {...this.state} />
                      )}
                    />
                </Switch>
            </div>
        </BrowserRouter>
    );
}

Answer 2

Состояние установки в handleClick должно быть:

handleClick() {
  this.setState({text: "good morning"})
}