将项目的数据保存在反应本机的asycstorage中

Question

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

<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 的项目时它会显示在另一页上。

下图是我做的：

我的数据库助手 class 是：

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

Answer 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

将项目的数据保存在反应本机的asycstorage中

To save the data onpress of item in a asycstorage in react native

react-native

async-components

react-native-flatlist