javascript - 在 React Native 中从 API 设置数据

Question

我从 api 获取数据，我可以在控制台中显示数据，但它没有在应用程序中显示。我尝试了很多方法，但它仍然没有在应用程序中显示。这就是我获取api的方式。

const [dataProduct,setDataProduct] = useState([]);
    useEffect(() => {
        getProductsApi();
    },[])
    const getProductsApi = async () => {
        axios.get(productUrl)
            .then((res) => {
                // console.log(res.data)
                setDataProduct(res.data)
            }).catch(err => console.log(err))
        // const response = await fetch(productUrl);
        // const data = await response.json();
        // try{
        //     setDataProduct(data);

        //     dataProduct.forEach(pro => {
        //     return(console.log(pro.title.rendered));
        //     })
        // }catch(err) {
        //     console.log(err)
        // }
    }

我在哪里使用数据我首先尝试使用 dataProduct 变量它在几秒钟后显示一个空数组它显示 api 的数据但仍然没有在应用程序上显示

 return (
        <SafeAreaView style={productsCaS.C}>
            <View style={productsCaS.warp}>
                <Text style={productsCaS.txt}>مواد غذائية</Text>
                <ScrollView
                    onScroll={({ nativeEvent }) => change(nativeEvent)}
                    showsHorizontalScrollIndicator={false}
                    pagingEnabled
                    horizontal
                    style={productsCaS.box}
                    bouncesZoom={true}
                >

                        {dataProduct.forEach((product) => {
                            return(
                            <View style={{ width: phoneH.W(45), marginRight: phoneH.W(2.5) }}>
                            <TouchableOpacity style={productsCaS.box}>
                                <Image
                                    source={{ uri: 'https://huzurshops.com/wp-content/uploads/2013/06/3a-300x300.jpeg' }}
                                    style={productsCaS.img}
                                />
                                <Button
                                    buttonStyle={productsCaS.btn}
                                    containerStyle={productsCaS.btn}
                                    icon={
                                        <Ikon is={'SimpleLineIcons'} i={'handbag'} s={24} />
                                    }
                                    iconRight={true}
                                    title='اضافة الى السلة'
                                    titleStyle={productsCaS.btnTxt}

                                />
                            </TouchableOpacity>
                            <TouchableOpacity style={productsCaS.title}>
                                <Text style={productsCaS.titleTxt}> {product.title.rendered}</Text>
                            </TouchableOpacity>
                            <View style={productsCaS.iconBox}>
                                <Ikon is={'Entypo'} i={'star'} s={20} c={'yellow'} />
                                <Ikon is={'Entypo'} i={'star'} s={20} c={'yellow'} />
                                <Ikon is={'Entypo'} i={'star'} s={20} c={'yellow'} />
                                <Ikon is={'Entypo'} i={'star'} s={20} c={'yellow'} />
                            </View>
                            <Text style={productsCaS.price}>{product._price}</Text>
                        </View>
                        )})}
</SafeAreaView>
            </View>

标签： javascriptreact-native