Блог

Я столкнулся с проблемой при передаче состояния из компонента приложения через маршрутизатор React. В функции componentWillMount компонента приложения состояние загружается через API, который передается компоненту Login путем указания его в функции визуализации компонента Route.

Но компонент входа в систему загружается до установки состояния приложения. Мне нужно передать это состояние всем другим компонентам. Пожалуйста, помогите!

 import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      language: 'en',
      labels: null,
    };
  }
  componentDidMount() {
    let language = getLanguage(); //from url
    this.setState({ language }, async () => {
      await this.getLabels();
    });
  }
  getLabels = () => {
    //Hit Api to fetch labels on basis of language set
    this.setState({ labels: data });
  };
  render() {
    return (
      <div className='App'>
        <Router>
          <Switch>
            <Route
              exact
              path='/'
              render={(props) => (
                <Login labels={this.state.labels} {...props} />
              )}
            />
          </Switch>
        </Router>
      </div>
    );
  }
}
export default App;


import React, { Component } from 'react';

export default class Login extends Component {
  render() {
    console.log(this.props.labels);
  }
}
  

this.props.labels не определен в компоненте входа.

Можете ли вы попробовать показать loder, пока ваш вызов api не будет успешным.

 import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      language: 'en',
      labels: null,
      fetchingLabels:true
    };
  }
  componentDidMount() {
    let language = getLanguage(); //from url
    this.setState({ language }, async () => {
      await this.getLabels();
    });
  }
  getLabels = () => {
    //Hit Api to fetch labels on basis of language set
    this.setState({ labels: data, fetchingLabels:false });
  };
  render() {
    if(this.state.fetchingLabels){
      return 'I am loading'   // you can add your loader here
    }
    return (
      <div className='App'>
        <Router>
          <Switch>
            <Route
              exact
              path='/'
              render={(props) => (
                 <Login labels={this.state.labels} {...props} />
              )}
            />
          </Switch>
        </Router>
      </div>
    );
  }
}
export default App;


import React, { Component } from 'react';

export default class Login extends Component {
  render() {
    console.log(this.props.labels);
  }
}