I tries calling data from api and rendering it on flatlist, but the flatlist remained blank

apicall:

    const apiCall = "https://api.jikan.moe/v4/top/anime"
    const [data, setData] = React.useState();
    const getData = () => {
        axios
        .get(apiCall)
        // .get(`${apiCall}?limit=2`)
        .then((res) => {
            // let data = JSON.parse(res.data);
            let data = res.data
            console.log(data)
            setData(data);
        })
        .catch((error) => {
            console.log(error);
        });
    };

flatlist:

      <FlatList
        style={styles.flatView}
        data={data}
        keyExtractor={(item) => item.mal_id}
        numColumns={2}
        columnWrapperStyle={styles.flatRow}
        renderItem={({ item }) => (
          <View style={styles.itemView}>
            <Image
              style={styles.image}
              source={{
                uri: `${item.images.jpg.image_url}`,
              }}
            />
            <View>
              <Text style={styles.title}>
                {handleTruncate(item.title, 25)}
              </Text>
            </View>
          </View>
        )}
      ></FlatList>

the api looks confusing is this probably multidimensional array? and i don't know what i did wrong. I appreciate if you could help.

CodePudding user response：

In setData(data); save it as setData(data.data); that should help.