Я хочу отобразить мой функциональный компонент «Домой» после того, как я получу Данные из функции в «useEffect», но когда я установлю свои данные из функции в моем const, мой Домашний компонент будет отображаться снова.

Если я удаляю оператор "set", он будет отображаться только один раз.

Когда домашний экран рендерится во второй раз, он запустит оператор навигации, который находится в дочернем компоненте.

Может кто-нибудь объяснить мне, почему это произошло и как я решаю эту проблему?

Мой код: HomeScreen.js

export function HomeScreen( navigation ) {

    const [item, setItem] = React.useState([]);
    console.log('fire home')

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


    return (
        <SafeAreaProvider>
            <SafeAreaView style={style.container}>
                <View>
                    <Banner data={item} navigation={navigation}/> 

                    <Text>Home</Text>
                </View>
            </SafeAreaView>
        </SafeAreaProvider>
    );
}

Banner item.js (навигационная инструкция будет запущена)

const BannerItem = ({ item, navigation }) => {
    return (
        <View style={styles.cardView} onTouchStart={navigation.navigation.navigate('Setting')}>
            <Image style={styles.image} source={{uri: item.header}} />
            <TouchableOpacity>
            <View style={styles.textView}>
                <Text style={styles.itemTitle}>{item.title}</Text>
                <Text numberOfLines={2} style={styles.itemDescription}>{item.content}</Text>
            </View>
            </TouchableOpacity>
        </View>
    )
}

Bannerdata.js

function getbannerdata(){
    console.log('fire bannerdata')
    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 }

Выходной терминал

Finished building JavaScript bundle in 634ms.
Running application on Léons iPhone.
fire home
fire bannerdata
fire home
1
Léon Zimmermann 2 Май 2020 в 12:10

2 ответа

Т. Дж. Краудер прав, в том числе и потому, что происходящее совершенно нормально.

То, что вы делаете, выглядит следующим образом: - home перед useEffect фактически запущен - запуск useEffect - домашний рендеринг снова, потому что был вызван setItem

0
Marco Duma 2 Май 2020 в 09:19

Я хочу сделать мой функциональный компонент "Домой" после того, как получу данные из функции ...

Затем вы должны получить данные из getbannerdata в родительском компоненте и передать их HomeScreen в качестве реквизита. В HomeScreen вы ничего не можете сделать, чтобы предотвратить рендеринг компонента до прибытия данных из getbannerdata.

В целом, с компонентами у вас есть два варианта, когда есть асинхронный процесс для получения их контента:

  1. Сделайте это в компоненте и обработайте рендеринг в случае, когда у компонента еще нет данных (возможно, с сообщением «загрузка» или аналогичным).

  2. Не создавайте компонент, пока у вас нет данных, что означает выполнение его в родительском элементе.

Пример № 1:

const { useState, useEffect } = React;

function getbannerdata() {
    return new Promise(resolve => {
        setTimeout(resolve, 800, "This is the banner");
    });
}

const HomeScreen = () => {
    const [banner, setBanner] = useState(null);
    
    useEffect(() => {
        getbannerdata().then(banner => setBanner(banner));
    }, [banner]);
    
    return (
        <div className="boxed">
            This is <code>HomeScreen</code>
            {banner && <div className="boxed">{banner}</div>}
        </div>
    );
};

const App = () => {
    
    return (
        <div className="boxed">
            This is <code>App</code>
            <HomeScreen />
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));
.boxed {
    border: 1px solid black;
    padding: 4px;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Или с индикатором «загрузки»:

const { useState, useEffect } = React;

function getbannerdata() {
    return new Promise(resolve => {
        setTimeout(resolve, 800, "This is the banner");
    });
}

const HomeScreen = () => {
    const [banner, setBanner] = useState(null);
    
    useEffect(() => {
        getbannerdata().then(banner => setBanner(banner));
    }, [banner]);
    
    return (
        <div className="boxed">
            This is <code>HomeScreen</code>
            <div className="boxed">{banner ? banner : <em>Loading...</em>}</div>
        </div>
    );
};

const App = () => {
    
    return (
        <div className="boxed">
            This is <code>App</code>
            <HomeScreen />
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));
.boxed {
    border: 1px solid black;
    padding: 4px;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Пример № 2:

const { useState, useEffect } = React;

function getbannerdata() {
    return new Promise(resolve => {
        setTimeout(resolve, 800, "This is the banner");
    });
}

const HomeScreen = ({banner}) => {
    return (
        <div className="boxed">
            This is <code>HomeScreen</code>
            <div className="boxed">{banner}</div>
        </div>
    );
};

const App = () => {
    const [banner, setBanner] = useState(null);
    
    useEffect(() => {
        getbannerdata().then(banner => setBanner(banner));
    }, [banner]);
    
    return (
        <div className="boxed">
            This is <code>App</code>
            {banner && <HomeScreen banner={banner} />}
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById("root"));
.boxed {
    border: 1px solid black;
    padding: 4px;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>

Я нашел эту статью Дана Абрамова очень полезной. Якобы речь идет о useEffect, но на самом деле речь идет о жизненном цикле функциональных компонентов и о хуках в целом.

0
T.J. Crowder 2 Май 2020 в 09:29