如何使用异步存储保存 route.params？

Question

抱歉，如果标题没有意义。不知道更好的标题。

如何使用 AsyncStorage 保存传递到第二个屏幕的 route.params 项？

在我的第一个屏幕中，我在 FlatList 中有一堆数据，可以使用模式打开。在该模态框内，我有一个 TouchableOpacity，它可以将模态框内的数据发送到我的第二个屏幕。已经传递到第二个屏幕的数据被传递到一个 FlatList。 FlatList 中的数据应该保存到 AsyncStorage 中。尝试了很多让这个工作的东西，但只收到警告消息 undefined。下面的代码是最新的进展。

使用 React Navigation V5.

第一个屏幕

const [masterDataSource, setMasterDataSource] = useState(DataBase);
const [details, setDetails] = useState('');

<TouchableOpacity
   onPress={() => {
   const updated = [...masterDataSource];
   updated.find(
    (item) => item.id === details.id,
   ).selected = true;
    setMasterDataSource(updated);
    navigation.navigate('cart', {
    screen: 'cart',
    params: {
     items: updated.filter((item) => item.selected),
     },
    });
    setModalVisible(false);
   }}>
   <Text>Add to cart</Text>
</TouchableOpacity>

第二个屏幕

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, TouchableOpacity } from 'react-native';
import { useTheme } from '../Data/ThemeContext';

import AsyncStorage from '@react-native-async-storage/async-storage';

import Ionicons from 'react-native-vector-icons/Ionicons';

export default function ShoppingList({ route, navigation }) {
  const [shoppingList, setShoppingList] = useState([]);
  const { colors } = useTheme();

  const todo = () => {
    alert('Todo');
  };

  useEffect(() => {
    restoreShoppingListAsync();
  }, []);

  const shoppingListAsync = () => {
    const shoppingList = route.params && route.params.items;

    setShoppingList(list);
    storeShoppingList(list);
  };

  const asyncStorageKey = '@ShoppingList';

  const storeShoppingListAsync = (list) => {
    const stringifiedList = JSON.stringify(list);

    AsyncStorage.setItem(asyncStorageKey, stringifiedList).catch((err) => {
      console.warn(err);
    });
  };

  const restoreShoppingListAsync = () => {
    AsyncStorage.getItem(asyncStorageKey)
      .then((stringifiedList) => {
        console.log(stringifiedList);

        const parsedShoppingList = JSON.parse(stringifiedList);

        if (!parsedShoppingList || typeof parsedShoppingList !== 'object')
          return;

        setShoppingList(parsedShoppingList);
      })
      .then((err) => {
        console.warn(err);
      });
  };

  const RenderItem = ({ item }) => {
    return (
      <View>
        <TouchableOpacity
          style={{
            marginLeft: 20,
            marginRight: 20,
            elevation: 3,
            backgroundColor: colors.card,
            borderRadius: 10,
          }}>
          <View style={{ margin: 10 }}>
            <Text style={{ color: colors.text, fontWeight: '700' }}>
              {item.name}
            </Text>
            <Text style={{ color: colors.text }}>{item.gluten}</Text>
            <Text style={{ color: colors.text }}>{item.id}</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  };

  const emptyComponent = () => {
    return (
      <View style={{ alignItems: 'center' }}>
        <Text style={{ color: colors.text }}>Listan är tom</Text>
      </View>
    );
  };

  const itemSeparatorComponent = () => {
    return (
      <View
        style={{
          margin: 3,
        }}></View>
    );
  };

  return (
    <View
      style={{
        flex: 1,
      }}>
      <View
        style={{
          padding: 30,
          backgroundColor: colors.Textinput,
          elevation: 12,
        }}>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <Ionicons name="arrow-back-outline" size={25} color="#fff" />
          </TouchableOpacity>
          <Text style={{ color: '#fff', fontSize: 20 }}>Inköpslista</Text>
          <TouchableOpacity>
            <Ionicons
              name="trash-outline"
              size={25}
              color="#fff"
              onPress={() => todo()}
            />
          </TouchableOpacity>
        </View>
      </View>
      <View style={{ flex: 1, marginTop: 30 }}>
        <FlatList
          data={shoppingList}
          renderItem={RenderItem}
          ListEmptyComponent={emptyComponent}
          ItemSeparatorComponent={itemSeparatorComponent}
          initialNumToRender={4}
          maxToRenderPerBatch={5}
          windowSize={10}
          removeClippedSubviews={true}
          updateCellsBatchingPeriod={100}
          showsVerticalScrollIndicator={true}
          contentContainerStyle={{ paddingBottom: 20 }}
        />
      </View>
    </View>
  );
}

Answer 1

因为您正在使用异步存储来维护购物车。我建议采用以下方法

在购物车中添加或移除新商品时更新异步存储
从购物车屏幕检索商品并在此处显示商品

在您导航之前存储如下项目

        AsyncStorage.setItem(
          'Items',
          JSON.stringify(updated.filter((item) => item.selected))
        ).then(() => {
          navigation.navigate('Cart', {
            items: updated.filter((item) => item.selected),
          });
        });

购物车屏幕如下所示

function Cart({ navigation, route }) {

  const [data,setData]=useState([]);
  React.useEffect(() => {
    async function fetchMyAPI() {
      const value = await AsyncStorage.getItem('Items');
      setData(JSON.parse(value));
    }

    fetchMyAPI();
  }, []);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Go back" onPress={() => navigation.goBack()} />
      <FlatList
        data={data}
        renderItem={RenderItem}
      />
    </View>
  );
}

工作示例 https://snack.expo.io/@guruparan/cartexample

如何使用异步存储保存 route.params？

How to save route.params with asyncstorage?

javascript

reactjs

react-native

asyncstorage

react-native-android