отправка данных между состояниями при реакции JS - PullRequest
Новая
       7

отправка данных между состояниями при реакции JS

0 голосов
/ 10 октября 2019

У меня есть компонент, например, «выбрать язык», когда я меняю язык в функции, например, «handleChange», содержащийся в компоненте «выбрать язык», я нажимаю еще 1 огонь, чтобы получить язык, при успешном полученииответ от пожара Я сохраняю данные в локальном хранилище, вопрос, когда я получаю данные и перехожу в другой компонент, например, компонент 'login', например, почему данные не совпадают, если выполняется функция handleChangeтогда как если он отмечен в компоненте «выбрать язык», язык изменился в соответствии с выбранным

, и есть ли другое решение для решения этой проблемы?

это язык выбора компонента* nb this.props.resGet или this.props.resSave - это механизм реагирования для получения / сохранения данных в localstorage 

constructor(props){
    super(props)
    this.state = {
      language:[],
      code:'',
      loading:true
    };
    this.handleChange = this.handleChange.bind(this)
  }

   handleChange(){
    if(this.refs.selectLanguage){
      const result = this.refs.selectLanguage.value
      this.setState({
        code:result
      })
      this.props.resSave('lang-code', result)
    };

    //nb this.props.resGet/this.resSave is a hoc for get or save data from localstorage 

    //get kode lang from localstorage 
    const getCodeFromLocal = this.props.resGet('lang-code')
    Api.post('pages-content', {CODE:getCodeFromLocal})
    .then((response) => {
      if(response.data.STATUS_CODE === '200'){
        this.props.resSave('toLocalPages' , JSON.stringify(response.data.DATA));
        this.setState({
           loading:false //end loading
        });
      }
    })

  }

  componentDidMount(){
    Api.get('language')
    .then((response) => {
      if(response.data.STATUS_CODE === '200'){
        this.setState({
          language:response.data.DATA,
          loading: (!this.props.resGet('toLocalPages'))
        })
      }
    });

    //default bahasa
    if(!this.props.resGet('toLocalPages')){
      const getCodeFromLocal = this.props.resGet('lang-code')||'RUWT-EN';
      Api.post('pages-content', {CODE:getCodeFromLocal})
      .then((response) => {
        if(response.data.STATUS_CODE === '200'){
          this.props.resSave('toLocalPages' , JSON.stringify(response.data.DATA));
          this.setState({
            loading:false //end loading
          });
        }
      })
    }
  }


  render() {
    const {language,loading,code} = this.state

    if(loading){
      return(
        <p>loading...</p>
      )
    }else{
      const getData = JSON.parse(this.props.resGet('toLocalPages')) 
      console.log(getData)
      return (
        <React.Fragment>
          <Form.Group controlId="selectLanguage">
            <Form.Label><b>{getData.app_setting.language}</b></Form.Label>
            <Form.Control as="select" ref="selectLanguage" onChange={this.handleChange} value={code}>
              {language.map(data => {
                return(
                  <React.Fragment key={data.language_id}>
                    <option value={data.code}>{data.language_name}</option>
                  </React.Fragment>
                )
              })}
            </Form.Control>
          </Form.Group>
        </React.Fragment>
      )
    }
  }

, и это компонент входа в систему, где есть компонент выбора языка импорта 

componentDidUpdate(prevProps) {
    const { resGet } = this.props;

    if (prevProps.resGet('toLocalPages') !== resGet('toLocalPages')) {
      // Set state and get data from localstorage
      this.setState({
        getDataLocal: JSON.parse(resGet('toLocalPages')),
        loading: false
      })
    }
  }

render() {
const { loading,getDataLocal} = this.state
if(loading){
      return(
        <p>loading</p>
      )
    }else{
      return (
      <div>
        <h3><b>{getDataLocal.page_login.title}</b></h3>
        <p><b>{getDataLocal.page_login.subtitle}</b></p>
    </div>
  )
}
...