FlatList: "Tried to get frame for out of range index NaN" with useEffect + fetch

Question

我正在尝试使用来自 fetch 的数据呈现 FlatList。它以前工作过，但现在它给了我错误““试图获取超出范围索引 NaN 的帧”。我有一个等待获取的异步函数，但我的 return（渲染）与 FlatList 首先被调用。我已经将提取代码更改为使用 useCallback(async() => ....) 但它不起作用。我不能将提取放在 useEffect 中，因为我需要它在组件内的其他地方（刷新东西）。这是我的组件代码:

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

    const getDataFromApi = useCallback(async() => {
        const u = await SecureStore.getItemAsync('user');
        const p = await SecureStore.getItemAsync('password');

        await fetch('https://arko.digital/wp-json/wp/v2/arko_alerta', {
        method: 'GET',
        headers: {
            'Authorization': 'Basic ' + Buffer.from(u + ':' + p).toString('base64'),
        }})
        .then((response) => response.json())
        .then((json) => {
            setData(json)
        })
        .catch((error) => {
            console.error(error);  
        });
    }, []);

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

    return (
        <View style={{flex: 1}}>
             <FlatList
                data={data}
                refreshing={refreshing}
                onRefresh={onRefresh}
                keyExtractor={({ id }, index) => id}
                ListHeaderComponent={<Text style={commonStyles.bigHeader}>Alertas</Text>}
                renderItem={({ item }) => (
                    <Alerta 
                        title={item.content.rendered.split('</b>')} 
                        content={item.content.rendered} 
                        time={item.date}
                        excerpt={item.excerpt.rendered}
                        hidden={true}
                    />
                )}
            /> 
        </View>
    );
}

export default Home;

使用 console.log 我注意到在几秒钟内确实 return 获取了一个对象数组。问题是我的 FlatList 没有在等待 fetch 调用。我究竟做错了什么？我是新手

正如我所说，这之前在 useEffect 外部使用简单的 async function getDataFromApi(){ ... } 并在 useEffect 内部调用 getDataFromApi() 就可以工作。

提前致谢

Answer 1

确保将数组传递给 FlatList，因为 FlatList 需要一个项目数组。

将此 useState 声明更改为 const [data, setData] = useState([]);

还要确保 json 是项目数组 setData(json)

FlatList: "Tried to get frame for out of range index NaN" with useEffect + fetch

FlatList: "Tried to get frame for out of range index NaN" with useEffect + fetch

fetch

async-await

react-native

react-hooks