javascript 传递一个返回数据的函数以响应本机FlatList数据属性

yftpprvb 于 2023-03-11 发布在 Java

关注(0)|答案(1)|浏览(90)

我在平面列表数据属性中使用了下面的函数，但是它没有呈现任何东西。为什么？我认为另一种方法是在函数中设置状态，并将状态用作平面列表数据属性，但是在这种情况下，无论异步存储何时改变，我如何设置状态？

async function getFlatlistData(){
      try{
        const numbers = await AsyncStorage.getAllKeys();
        //numbers = 
        // ["{\"key\":\"1678328476308\",\"title\":\"Dog\"}",
        //"{\"key\":\"1678328921886\",\"title\":\"Cat\"}"]
        
  
        numbers.forEach(function myFunction(item, index, arr) {
                          arr[index] = JSON.parse(item);
                          arr[index]['key'] = Number(arr[index]['key'])
                        })
        numbers.sort((a, b) => b.key - a.key);
        console.log("running")
        return numbers

      } catch (error) {
        alert(error)
      }
      
    }

return (
    </View>
       <FlatList 
          data={getFlatlistData()} 
          renderItem={
            ({item}) => <Text>{item.title}</Text>
          } 
          keyExtractor={(item, index) => index.toString()}
       />
     </View>
    );
  }

JavaScript

来源：https://stackoverflow.com/questions/75686149/passing-a-function-that-returns-data-to-react-native-flatlist-data-property

1条答案

按热度按时间

mzsu5hc01#

FlatList组件未呈现任何内容，因为它接收的是承诺而不是数据数组。
在分配给Flatlist之前，需要使用useState来获取数组。

import React, { useEffect, useState } from 'react';
import { FlatList, Text, View } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

function App() {
 const [data, setData] = useState([]);

useEffect(() => {
  async function fetchData() {
    try {
     const numbers = await AsyncStorage.getAllKeys();
     const parsedNumbers = numbers.map((item) => JSON.parse(item));
     const sortedNumbers = parsedNumbers.sort((a, b) => b.key - a.key);
     setData(sortedNumbers);
   } catch (error) {
    alert(error);
  }
}

fetchData();
}, []);

return (
 <View>
  <FlatList
    data={data}
    renderItem={({ item }) => <Text>{item.title}</Text>}
    keyExtractor={(item) => item.key.toString()}
  />
</View>
);
}

export default App;

赞(0）回复(0）举报 2023-03-11

我来回答

javascript 传递一个返回数据的函数以响应本机FlatList数据属性

1条答案

相关问题

热门标签

最新问答