Ошибка при передаче состояния в REACT из App.js в Component.js по маршруту - PullRequest
Новая
       13

Ошибка при передаче состояния в REACT из App.js в Component.js по маршруту

0 голосов
/ 09 ноября 2018

Итак, я некоторое время изучал React, но один из ключевых моментов в том, что мне пока удалось, - прохождение состояний.

Я пытаюсь передать состояние из моего App.js компоненту, отображаемому по маршруту. К сожалению, в MyComponent.js я получаю сообщение об ошибке «lang is undefined».

Может кто-нибудь направить меня к решению? Это то, что я до сих пор:

App.js 

class App extends Component {

constructor (props) {
    super (props)
    this.state = {
        language: 'en'
    }
}   
render() {
    return (
        <BrowserRouter>
            <div className='App'>
                <Switch>
                    <Route 
                    exact path='/' render={(props) => <MyComponent lang={this.state.language} />}
                    />
                    <Route exact path='/privacy/policy' component={Policy} />
                    <Route path='*' component={NotFound} />
                </Switch>
            </div>
        </BrowserRouter>
    );
} } export default App;

MyComponent.js 

export class MyComponent extends Component {

constructor(props) {
    super(props);
    this.state = {
        lang : {lang} 
    }
}
render () {
    return (
        <div className='searchBar'>
            <p>Current language is: {this.state.lang}</p>// HERE COMES THE STATE
        </div>
    );
}}

1 Ответ

0 голосов
/ 09 ноября 2018

Вы пытаетесь передать props до MyComponent компонента, но вы пытаетесь отобразить его в SearchBar компоненте. Переименуйте SearchBar в MyComponent в первом маршруте вашего App.js.

Кроме того, в MyComponent.js удалите свойство lang из state и измените: 

<p>Current language is: {this.state.lang}</p>

до 

<p>Current language is: {this.props.lang}</p>
...