Сохранение входных данных не сохраняется при нажатии кнопки редактирования

Вот эти три состояния, которые у меня есть прямо сейчас. Когда я хочу отредактировать адрес, он сохраняется не сразу. Он показывает отредактированный ввод, когда снова возвращается со страницы драйвера movit на страницу личных данных.

Это страница драйвера movit Сохранение входных данных не сохраняется при нажатии кнопки редактирования

Это личные данные Сохранение входных данных не сохраняется при нажатии кнопки редактирования

Это страница редактирования Сохранение входных данных не сохраняется при нажатии кнопки редактирования

Возможно, возникла проблема с асинхронным хранилищем, которое показывает отредактированный ввод при возврате со страницы драйвера.

**Address.js**
  constructor(props) {
    super(props)
    this.state = {
      address: '',
      userToken: null
    }
  }
  
  async componentWillMount() {
    try {
      let value = await AsyncStorage.getItem('userData')
      let userDetails = JSON.parse(value)
      console.info('userDetails 2: ', userDetails)
      if (userDetails !== null) {
        this.setState({
          address: userDetails.address,
          userToken: userDetails.token
        })
      }
      } catch (error) {
        console.info(error)
    }
  }

  saveAddressEdit = (fieldName, fieldValue) => {
    AsyncStorage.setItem(fieldName, fieldValue)
  
    let {userToken} = this.state
  
    var formData = new FormData()
    formData.append(fieldName, fieldValue)
  
    fetch('MyURL', {
      method: 'POST',
      headers: {
        'X-API-KEY': 'myApiKey',
        'Authorization': userToken
      },
      body: formData
    }).then(function (response) {
       console.info(response)
       let data = JSON.parse(response._bodyText)
       Alert.alert(data.message)
    })
    .catch((error) => {
      console.info(error)
    })
    .done()
  }

  render() {
    const {address} = this.state

    return (
      <Container>
        <Content style = {{marginHorizontal:20}}>
          <Item style = {{marginVertical:40}}>
            <Input placeholder = " Type your Address:" 
              onChangeText = {(address) => this.setState({address})}
              value = {address}
            />
          </Item>
           <Button full danger  onPress = {()=>this.saveAddressEdit('address', address)} style = {{backgroundColor:'#ff0000'}}>
                <Text style = {{color: '#ffffff'}}>Update Address</Text>
              </Button>
        </Content>
      </Container>
    );
  }
}

Это код address.js для редактирования. Решение, которое мне нужно, похоже на то, что я хочу сразу показать отредактированный ввод. Заранее спасибо.

reactjs react-native

11.12.2018 08:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

121

Ответы 1

вы не передаете состояние при нажатии на кнопку. Измените вызов функции onPress на

onPress = {()=>this.saveAddressEdit('address', this.state.address)}

также измените значение TextInput

значение = {this.state.address}

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

Итак, ваша последняя функция рендеринга

render() {

    return (
      <Container>
        <Content style = {{marginHorizontal:20}}>
          <Item style = {{marginVertical:40}}>
            <Input placeholder = " Type your Address:" 
              onChangeText = {(address) => this.setState({address:address})}
              value = {this.state.address}
            />
          </Item>
           <Button full danger  onPress = {()=>this.saveAddressEdit('address', this.state.address)} style = {{backgroundColor:'#ff0000'}}>
                <Text style = {{color: '#ffffff'}}>Update Address</Text>
              </Button>
        </Content>
      </Container>
    );
  }

Я уже деструктурирую метод render () следующим образом: const {address} = this.state

— 12.12.2018 11:01

Вы заменили свой код приведенным выше? Проблема может быть связана с использованием одного и того же имени для переменных.

— 26.12.2018 12:00

11.12.2018 12:55