如何从反应本机组件中的函数传递数据

Question

我已经在 React Native 中创建了一个横幅组件，现在我正在尝试从该组件中的函数（单独的 .js 文件）添加数据。我想从我的主屏幕获取有关初始负载的数据，但我不知道如何从我的函数传递数据。我希望你能帮助我。

这是我的代码：

home.js

export function HomeScreen() {

    {/*This will cause an error*/}
    const [item, setItem] = React.useState([]);

    React.useEffect(() => {
    {/*Function where i fetch my Data from API */}
        getbannerdata().then(res => {
            setItem(res)
        })
        console.log(item)
    }, [])


    return (
        <SafeAreaProvider>
            <SafeAreaView style={style.container}>
                <View>
                    {/*Banner Component with Data param*/}
                    <Banner data={item} /> 
                    <Text>Home</Text>
                </View>
            </SafeAreaView>
        </SafeAreaProvider>
    );
}

我的功能： bannerdata.js

export const getbannerdata = () => {
    const [data, setData] = React.useState([])
    console.log('Test')
    fetch('http://192.168.178.46:8000/intranet/messages/', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
        },

    })
        .then(res => res.json())
        .then(res => {
            console.log(res)
            setData(res)


        })
        .catch(error => console.log(error));
        return data;
};

希望你能帮帮我。

Answer 1

你应该只在你的组件中使用 useState 而不是在你获取数据的函数中。

bannerdata.js

export const getbannerdata = () => {
    return fetch('http://192.168.178.46:8000/intranet/messages/', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
        },
    });
};

home.js

import { getbannerdata } from './bannerdata'; //import getbannerdata function and you should provide the path of bannerdata.js

export function HomeScreen() {

    const [item, setItem] = React.useState([]);

    React.useEffect(() => {
    {/*Function where i fetch my Data from API */}
        getbannerdata()
        .then(res => res.json())
        .then(res => {
            console.log(res)
            setItem(res);
        });
        .catch(error => console.log(error));
    }, []);


    return (
        <SafeAreaProvider>
            <SafeAreaView style={style.container}>
                <View>
                    {/*Banner Component with Data param*/}
                    <Banner data={item} /> 
                    <Text>Home</Text>
                </View>
            </SafeAreaView>
        </SafeAreaProvider>
    );
}

Answer 2

感谢您的帮助。这是我的最终解决方案。它有点不同，但现在它按预期工作

bannerdata.js

import * as React from 'react';

function getbannerdata(){
    return fetch ('http://192.168.178.46:8000/intranet/messages/', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
        },

    })
        .then((res) => res.json())
        .then((resData) => {
            return resData;
        })
        .catch(error => console.log(error))

};

export { getbannerdata }

home.js

import {getbannerdata} from './home/bannerdata.js';

export function HomeScreen() {

    const [item, setItem] = React.useState([]);

    React.useEffect(() => {
        getbannerdata()
        .then(res => setItem(res))
    }, []);


    return (
        <SafeAreaProvider>
            <SafeAreaView style={style.container}>
                <View>
                    {/*Banner Component with Data param*/}
                    <Banner data={item} /> 
                    <Text>Home</Text>
                </View>
            </SafeAreaView>
        </SafeAreaProvider>
    );
}

如何从反应本机组件中的函数传递数据

How to pass data from a function in react native component

function

django-rest-framework

react-native

react-functional-component