Я использую React для своего проекта. Я также использую библиотеку response-router-dom. Однако меня путает передача данных с помощью response-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 в Child не обновляется, если я нажимаю кнопку. Это работает, только если я не обновляю страницу.

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

1
xxddoo 23 Окт 2018 в 07:59

2 ответа

Лучший ответ

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

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

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

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

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

const { languageChosen } = this.props.languageChosen;
2
Root 25 Окт 2018 в 06:25

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

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

1
DevDwarf 23 Окт 2018 в 08:37
52941463