Сохранить данные о нажатии элемента в асистори - PullRequest
Новая
       20

Сохранить данные о нажатии элемента в асистори

0 голосов
/ 01 мая 2019

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

<Autocomplete
      autoCapitalize="none"
      autoCorrect={false}
      containerStyle={styles.autocompleteContainer}
      data={autotime.length === 1 && comp(query, autotime[0].name) ? [] : autotime}
      defaultValue={this.state.timeZone}
      onChangeText={text => this.setState({ query: text })}
      placeholder="Enter Location"
      renderItem={({ name, release_date }) => (
        <TouchableOpacity onPress={() => this.setState({ query: name,timezoneArray:autotime[0].timezones })}>
          <Text style={styles.itemText}>
            {name}
          </Text>
        </TouchableOpacity>
      )}
    />
    <View style={styles.descriptionContainer}>
    {autotime.length > 0 ? (
      <FlatList
      style={{flex:1}}
      data={this.state.timezoneArray}
      renderItem={({ item }) => <TimeZoneItem text={item} />}

    />

      ) : (

        <Text style={styles.infoText}>Enter Location</Text>

)}

Я хочу, чтобы при нажатии на элементы плоского списка он отображался на другой странице.

На рисунке ниже показано, что я сделал: enter image description here

Мой вспомогательный класс базы данных: 

export const SaveItem = (key, value) => {
AsyncStorage.setItem(key, value);
};

export const ReadItem = async (key) => {
try {
    var result = await AsyncStorage.getItem(key);
    return result;
 } catch (e) {
    return e;
 }
 };

 export function MultiRead(key, onResponse, onFailure) {
 try {
    AsyncStorage.multiGet(key).then(
        (values) => {
            let responseMap = new Map();
            values.map((result, i, data) => {
                let key = data[i][0];
                let value = data[i][1];
                responseMap.set(key, value);
            });
            onResponse(responseMap)
        });
 } catch (error) {
     onFailure(error);
 }
 };

export async function DeleteItem(key) {
try {
    await AsyncStorage.removeItem(key);
    return true;
}
catch (exception) {
    return false;
}
}

и вот я добавил свой код для сохранения 

 handleTimezone = (text) => {
  this.setState({ TimeZoneItem: text })
 }
  newData.TimeZoneItem = this.state.TimeZoneItem
  this.setState({
 TimeZoneItem: '',
})   
 ReadItem('timeData').then((result) => {
  let temp = []
  if (result != null) {
    temp = JSON.parse(result)
  } else {
    temp = []
  }
  temp.push(newData)
  SaveItem('timeData', JSON.stringify(temp))
  console.log(`New Data: ${JSON.stringify(temp)}`)
  }).catch((e) => {

  })
  }
  <FlatList
      style={{flex:1}}
      data={this.state.timezoneArray}
      renderItem={({ item }) => (
      <TouchableOpacity>
      <TimeZoneItem text={item} onPress={() => this.props.onPress()}
      value={this.state.TimeZoneItem}

      />
      </TouchableOpacity>)}

1 Ответ

0 голосов
/ 01 мая 2019

Вам понадобится массив для сохранения всех сохраненных элементов.

, например, 

state = {
  saved: []
};

При нажатии на элемент часового пояса, получите значения из состояния, добавьте новый элемент.в массив и сохраните массив в асинхронном хранилище, используя JSON.stringify()

onSave = item => {

    const { saved } = this.state;
    const newItems = [...saved, item];

    this.setState({
    saved: newItems
    });

    const items = JSON.stringify(newItems);

    SaveItem("saved", items)
    .then(res => {
        console.warn("saved", res);
    })
    .catch(e => console.warn(e));
};

Затем на другом экране получите элементы, используя вашу функцию ReadItem, например. 

state = {
    saved: []
};

componentDidMount = () => {
    ReadItem("saved")
    .then(res => {
        if (res) {
        const saved = JSON.parse(res);
        this.setState({
            saved: saved
        });
        }
    })
    .catch(e => console.warn(e));
};

Рабочая демоверсия

...