Реагировать на собственный асинхронный режим, получая нулевое значение при первом запуске

Я пытаюсь отправить информацию о пользователе на сервер после того, как пользователь введет свое имя и номер телефона. Я смог получить правильную информацию, когда пользователь ввел свою информацию. Однако при первом запуске приложения я получаю нулевые данные для this.state.name и this.state.phone вместо пустой строки.

Ниже мой код:

constructor(){
  super()
  this.clearData = this.clearData.bind(this)
  this.persistData = this.persistData.bind(this)

  this.state = {
    name: '',
    phone: ''
  }
}

submit(){
  let collection = {}
  collection.name = this.state.name,
    collection.email = this.state.phone,
    console.warn(collection)
  var url = 'http://localhost:3000/users';
  fetch(url, {
    method: 'POST', // or 'PUT'
    body: JSON.stringify(collection), // data can be `string` or {object}!
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(res => res.json())
    .then(response => console.log('Success:', JSON.stringify(response)))
    .catch(error => console.error('Error:', error));
}

persistData(){
  let name = this.state.name
  let phone = this.state.phone
  AsyncStorage.setItem('name', name)
  AsyncStorage.setItem('phone', phone)
  this.setState({ name: name, persistedName: name, phone: phone, persistedPhone: phone })
}

check(){
  AsyncStorage.getItem('name').then((name) => {
    this.setState({ name: name, persistedName: name })
  })
  AsyncStorage.getItem('phone').then((phone) => {
    this.setState({ phone: phone, persistedPhone: phone })
  })
}

componentWillMount(){
  this.check()
}

render() {

  ////Here I am getting null! 
  console.log(this.state.name)
  console.log(this.state.phone)

  return ()
    < View >
    <TouchableOpacity
      onPress={() => { this.persistData(); this.submit(); }}>
      <Text> submit button </Text>
    </TouchableOpacity>
    </View >
}

Я хочу получить пустую строку для this.state.name и this.state.phone при первом запуске приложения. Есть ли способ сделать это?

0
0
715
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

AsyncStorage возвращает значение null, если оно еще не установлено. Итак, в вашей ситуации, когда вы запускаете приложение в первый раз и вызываете this.check(), возвращаются значения null. Ваш обратный вызов отменяет состояние по умолчанию. После того, как вы нажмете «Отправить», он будет настроен так, что в следующий раз, когда вы запустите приложение, он будет установлен.

Вам необходимо установить значение по умолчанию в вашем обратном вызове AsyncStorage:

this.setState({name: name || '', persistedName: name || ''})

Это устанавливает имя, если оно равно != null, и undefined, иначе устанавливает пустую строку.

Большое спасибо! Первый не заменит null пустой строкой, но второй вариант, который вы мне дали, отлично работает!

kirimi 10.09.2018 08:14

Другие вопросы по теме