Как передать данные из функции в реагирующий нативный компонент - PullRequest
Новая
       25

Как передать данные из функции в реагирующий нативный компонент

1 голос
/ 26 апреля 2020

Я создал компонент Banner в 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;
};

Надеюсь, вы мне поможете.

Ответы [ 2 ]

0 голосов
/ 27 апреля 2020

Спасибо за вашу помощь. Это мое окончательное решение. Немного по-другому, но теперь он работает как положено

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>
    );
}
0 голосов
/ 26 апреля 2020

Вы должны использовать 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>
    );
}
...