0

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

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

1 回答 1

0

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

例如

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

工作演示

于 2019-05-01T11:48:55.120 回答