React-Router Pass Data

Question

Я использую React для своего проекта.Я также использую библиотеку Reaction-router-DOM.Тем не менее, я путаю про передачу данных по реагирующему маршрутизатору.

Вот код для родительского компонента:

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Path: {
                pathname: "/child/id/1",
                state: {
                    languageChosen: "English"
                }
            }
        };
        this.onChangeLanguage = this.onChangeLanguage.bind(this);
    }
    onChangeLanguage() {
        const { Path } = this.state
        Path.state.languageChosen = 'Spanish'
        this.setState({Path})

    }
    render() {
        return (
            <div>
              <NavLink to={this.state.Path}>ToChild</NavLink>
              <Route
                path={`/child/id/:id`}
                render={props => (
                  <Child {...props} onChangeLanguage={this.onChangeLanguage} />
                )}
              />
            </div>
        );
    }
}

Он имеет состояние под названием Path.Родительский компонент передает функцию onChangeLanguage своему дочернему компоненту.

Вот дочерний компонент:

class Child extends Component {
    onChange = () => {
        this.props.onChangeLanguage;
    };
    render() {
        const { languageChosen } = this.props.location.state;
        return (
             <div>
              {languageChosen === "English" ? "English" : "Spanish"}
              <button onClick={this.onChange}>Change Language</button>
            </div>
        );
    }
}

Если я нажму кнопку Change Lanuguage в дочернем компоненте, функция будет вызвана, и состояние в родительском компоненте изменится.Реквизит LanguageChosen также обновляется в дочернем компоненте.

Однако, если я обновляю страницу, реквизит LanguageChosen в дочернем элементе не обновляется, если я нажимаю кнопку.Это работает только если я не обновляю страницу.

Как мне это исправить.Спасибо!

Answer 1

Причина возникновения этой проблемы заключается в следующем:

const { languageChosen } = this.props.location.state

languageChose устанавливается из this.props.location, местоположение задается, когда URL-адрес изменяется на "/ child / id /: id", после обновлениястраница, состояние в родительском элементе изменяется, но это не изменит location.state. И, я думаю, вы можете использовать реквизиты в компоненте для решения проблемы.1. установить свойство languageChosen в маршруте

component={props => (
    <Child {...props} onChangeLanguage={this.onChangeLanguage} languageChosen={this.state.Path.state.languageChosen}/>
)}

2.измените это в дочернем компоненте

const { languageChosen } = this.props.languageChosen;

Answer 2

Этот код немного смущает меня, но помните, что когда вы обновляете страницу, все javascript перезагружается, поэтому вы жестко закодировали languageChosen до English в родительском элементе, поэтому каждый раз, когда вы обновляете страницу, она сбрасывается до English,Вы можете либо сохранить значение в localStorage и проверить его наличие при обновлении, либо добавить его в путь маршрута child/id/:id/:language

Затем, если вы используете React Router v4, в своем дочернем компоненте используйте this.props.match.params.language ибудет отображаться данный язык.