在反应本机中将项目的数据保存在 asycStorage 中答案

【问题标题】：To save the data onpress of item in a asycstorage in react native在反应本机中将项目的数据保存在 asycStorage 中
【发布时间】：2019-05-01 06:16:12
【问题描述】：

当在以前的平面列表中按下某个项目时，我正在尝试在另一个屏幕上显示时区。当我选择它时，我的数据来自自动完成，它显示在平面列表中。

<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>

)}

我希望当我按下 flatlist 的项目时，它会显示在另一个页面上。

下图显示了我所做的：

我的数据库助手类是：

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>)}

【问题讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

标签： react-native react-native-flatlist async-components

【解决方案1】：

您需要一个数组来保存所有已保存的项目。

例如

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));
};

Working Demo

【讨论】：