Обновить состояние от дочернего компонента - PullRequest
Новая
       11

Обновить состояние от дочернего компонента

0 голосов
/ 24 сентября 2019

У меня есть 2 компонента, первый компонент «Register» в качестве родительского компонента, а второй компонент «UserCountry», сначала я запускаю компонент «UserCountry» и отправляю состояние в API для получения списка стран «данные»", затем я установил его в localStorage, который позже я передам компоненту" Register / parent ", как мне установить состояние в компоненте" Register ", чтобы добавить данные, которые я получил от компонента" UserCountry "?

это мой родительский компонент "Register" 

constructor(props){
    super(props)
    this.state = {
      MEMBER_FIRST_NAME:'',
      MEMBER_LAST_NAME:'',
      MEMBER_EMAIL:'',
      MEMBER_PASSWORD:'',
      MEMBER_PASSWORD2:'',
      ACCEPT_MARKETING:1
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e){
    this.setState({
      [e.target.name] : e.target.value
    })
  }

  getIdCountry(){
    return this.setState({
      MEMBER_COUNTRY_ID:localStorage.getItem('country_id'),
      MEMBER_COUNTRY_NAME:localStorage.getItem('country_name'),
    })
  }

  componentDidMount(){
    this.getIdCountry();
  }

  async handleSubmit(e){
    e.preventDefault()
    await Api.post('member/register' , this.state)
    .then((response) => {
      let responJson = response
      console.log(responJson)
    })
  }

, а это дочерний компонент "UserCountry". Я отправлю данные, полученные из компонента UserCountry, в родительское состояние компонента "Register". 

constructor(props){
    super(props)
    this.state = {
      country: [],
    };
    this.handleSelect = this.handleSelect.bind(this)
  }

  async componentDidMount(){
    await Api.get('user-country', this.state)
    .then((response) => {
      let responseJson = response
      if(responseJson.data.STATUS_CODE === '200'){
        // this.props.resSave('country', JSON.stringify(responseJson.data.DATA))
        this.setState({
          country:response.data.DATA
        })
      }else{
        alert("ERR CONNECTION TIMEOUT")
      }
    })
  }

  handleSelect(e){
    if (this.refs.idCountry) {
      let strResult = this.refs.idCountry.value
      let conToArray = strResult.split(",")
      this.setState({
        MEMBER_COUNTRY_ID:conToArray[0],
        MEMBER_COUNTRY_NAME:conToArray[1]
      })
      this.props.resSave('country_id', conToArray[0])
      this.props.resSave('country_name', conToArray[1])
    }
  }

поэтому позже я надеюсь, что вот так (родительский компонент) 

constructor(props){
    super(props)
    this.state = {
      MEMBER_FIRST_NAME:'',
      MEMBER_LAST_NAME:'',
      MEMBER_EMAIL:'',
      MEMBER_PASSWORD:'',
      MEMBER_PASSWORD2:'',
      ACCEPT_MARKETING:1,
     // new properties and values ​​obtained from child components
      MEMBER_COUNTRY_ID:localStorage.getItem('country_id'),
      MEMBER_COUNTRY_NAME:localStorage.getItem('country_name'),
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

Я пробовал это несколько раз, свойство было успешно добавлено, но значение из localStorage я не сделалполучить

...