最后一个 AsyncCallback 项目在 React Native 中消失

Question

我有一个对象数组，当新项目附加到列表时，应该存储这些数据。此外，当应用程序加载时，必须将此信息推回到列表中。所以，我使用 AsyncCallback，但它不能正常工作。当我刷新应用程序时，所有存储的元素都出现在列表中，除了最后一个。我怎样才能 return 将此项目返回列表？

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, FlatList, Button, AsyncStorage } from 'react-native';

export default function HomeScreen() {

  const [listItems, setListItems] = useState([
  {
    // example list item
    id: '0',
    text: 'Item 1'
  },
  ]);
  const [idx, incrIdx] = useState(1);

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


  const pushItem = () => {
    var data = new Object();
    data.id = idx.toString();
    data.text = "Item " + idx;
    setListItems([...listItems, data]);
    incrIdx(idx + 1);
    storeData();
  };

  const storeData = async () => {
      await AsyncStorage.setItem('listItems', JSON.stringify(listItems));
  };

  const getData = async () => {
    const value = await AsyncStorage.getItem('listItems');
    if(value !== null) {
      setListItems([...listItems, JSON.parse(value)]);
    }
  };

  return (
    <View style={styles.container}>
      <FlatList
          data={listItems}
          renderItem={({item}) => 
            <View>
              <Text>{item.text}</Text>
            </View>
          }
          keyExtractor={item => item.id}
      />
      <Button
        title="Push data"
        onPress={pushItem}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

Answer 1

您是否查看了 AsyncStorage.setItem 的实际设置？

我猜它没有使用最新的 listItems 状态，因为挂钩设置器是异步的（就像旧的 setState）。

要表达更新状态时应该生效的逻辑，请使用 useEffect api。

useEffect(() => {
  // Instead of calling storeData() with stale state
  AsyncStorage.setItem('listItems', JSON.stringify(listItems));
}, [listItems]);

最后一个 AsyncCallback 项目在 React Native 中消失

Last AsyncCallback item disappearing in React Native

javascript

react-native

listview

asyncstorage