Hook 和 AsyncStorage 加载 FlatList 的问题

Question

我的应用程序中有 2 个屏幕，一个屏幕有一个表单，用户可以在其中存储它在 AsyncStorage 中填写的数据，这个屏幕读取保存在 AsyncStorage 中的所有数据，并应在 FlatList 中显示数据。这里的问题是什么都没有呈现，屏幕是空白的。我不知道问题出在哪里，因为如果您阅读代码，console.log(productosData) 实际上在我的命令行中 returns 结果结构完全相同。所以 productosData 加载没有问题，但由于某种原因，这不起作用。

export default function TestScreen () {

    const [productosData, setproductosData] = useState([]);        

    const ItemView = ({item}) => {
      return (
        <View>
          <Text>
            {item}
          </Text>
        </View>
      );
    };

    useEffect( () => { 
        async function cargarEnEstado() { 
          const keys = await AsyncStorage.getAllKeys();  
          const result = await AsyncStorage.multiGet(keys);  
          //result = [["a","b"],["c","d"],["e","f"],["g","h"]]
          result.forEach(element => (setproductosData(productosData.push(element))));
          console.log(productosData);
        }
        cargarEnEstado()
    },[])

    return (
      <View style={styles.container}>

      <FlatList
        data={productosData}
        renderItem={ItemView}
      />

      </View>
    );
};

const styles = StyleSheet.create({
  container: {
    flex: 2,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

所以我可能认为问题出在我的 FlatList 上，然后我决定取出我的 FlatList 并用文本测试钩子，但是当我在文本中使用 {productosData} 时，屏幕显示的数字与第一个结果数组的长度。所以在这种情况下，我在屏幕上看到 4 因为结果和 productosData 都具有这种结构 [["a","b"],["c","d"],["e","f"] ,["g","h"]] 第一个数组的长度为 4.

export default function TestScreen () {

    const [productosData, setproductosData] = useState([]);        

    const ItemView = ({item}) => {
      return (
        <View>
          <Text>
            {item}
          </Text>
        </View>
      );
    };

    useEffect( () => { 
        async function cargarEnEstado() { 
          const keys = await AsyncStorage.getAllKeys();  
          const result = await AsyncStorage.multiGet(keys);  
          //result = [["a","b"],["c","d"],["e","f"],["g","h"]]
          result.forEach(element => (setproductosData(productosData.push(element))));
          console.log(productosData);
        }
        cargarEnEstado()
    },[])

    return (
      <View style={styles.container}>

         <Text> {productosData} </Text>

      </View>
    );
};

const styles = StyleSheet.create({
  container: {
    flex: 2,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

有什么建议吗？提前谢谢你。

Answer 1

没有渲染的原因是 element 是一个字符串数组 ['a','b']，如果我理解正确的话。尝试将您的 itemView 更改为此

const ItemView = ({item}) => {
      return (
        <View>
          <Text>
            {item[0]+ ' , ' + item[1]}
          </Text>
        </View>
      );
    };

还有，你的useEffect不是很干净。请注意，React 中的状态是不可变的。通过在 productosData 上调用 push，您正在改变状态。首先，创建状态的浅表副本，然后将新对象推送到副本中。只有这样你才会更新你的状态。

然而，没有理由迭代你的结果，只是将它们散布在状态上，就像这样：

  async function cargarEnEstado() { 
  
          const keys = await AsyncStorage.getAllKeys();  
          const result = await AsyncStorage.multiGet(keys);  
          //result = [["a","b"],["c","d"],["e","f"],["g","h"]]
    
          setProductosData([...productosData, ...result])
         
          console.log(productosData); // Also state is async, so this might not log the correct value
        }

Hook 和 AsyncStorage 加载 FlatList 的问题

Problem with Hook and AsyncStorage to load a FlatList

react-native

react-hooks

asyncstorage