Question

对不起，英语不好。

我的功能组件未等待API函数，我正在编写异步并等待，并且无法再次工作。.

“对象作为React子对象无效”错误屏幕...

请帮助我：'/

const NormalCarousel = async (props) => {
    const navigation = useNavigation();
    const [ResponseData, setResponseData] = useState('');

    const ComponentAPI = props.api;
    const API = await axios.get(ComponentAPI).catch((error) => {alert(error)});
    await setResponseData(API);

    return(
        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
            {
                ResponseData.map(item => (
                    <TouchableOpacity style={styles.CarouselTouchable} onPress={() => navigation.navigate("Ürün", {id: item.item_id})}>
                        <Image
                            style={styles.CarouselImage}
                            source={{uri: item?.item_avatar}}
                        />
                        <View style={styles.CarouselView}>
                            <Text style={styles.CarouselTitle}>{item?.item_name}</Text>
                            <Text style={styles.CarouselSubtitle}>{item?.item_stock_code}</Text>
                        </View>
                    </TouchableOpacity>
                ))
            }
        </ScrollView>
    )
}

Answer 1

发生此错误是因为尝试渲染该组件的父组件实际上正在渲染解析为组件的Promise。那是不可能的。

您应该改为调用函数以在组件安装（useEffect）上加载一次数据。您还需要将useState('')替换为useState([])，因为您要在呈现时映射这些数据。

const NormalCarousel = (props) => {
    const { api } = props;
    const navigation = useNavigation();
    const [responseData, setResponseData] = useState([]);

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

    async function getAPI() {
        const API = await axios.get(api).catch((error) => alert(error));
        setResponseData(API);
    }

    return(
        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            {
                responseData.map(item => (
                    <TouchableOpacity style={styles.CarouselTouchable} onPress={() => navigation.navigate("Ürün", {id: item.item_id})}>
                        <Image
                            style={styles.CarouselImage}
                            source={{uri: item.item_avatar}}
                        />
                        <View style={styles.CarouselView}>
                            <Text style={styles.CarouselTitle}>{item.item_name}</Text>
                            <Text style={styles.CarouselSubtitle}>{item.item_stock_code}</Text>
                        </View>
                    </TouchableOpacity>
                ))
            }
        </ScrollView>
    )
}

反应本机功能组件ASYNC / AWAIT问题

1 个答案: