Question

我想在从“ useEffect”中的函数获取数据后呈现功能组件“ Home”，但是当我从const中的函数设置数据时，Home组件将再次呈现。

如果我删除“ set”语句，它将仅呈现一次。

第二次渲染HomeSrceen时，它将启动子组件中的Navigation Statement。

任何人都可以向我解释为什么会发生这种情况以及我如何解决这个问题？

我的代码： 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>
    );
}

banneritem.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

Answer 1

从函数获取数据后，我想呈现功能组件“ Home”。

然后，您必须从父组件中的getbannerdata获取数据，并将其作为道具传递给HomeScreen。您无法在HomeScreen中采取任何措施来阻止在getbannerdata的数据到达之前渲染组件。

通常，对于组件来说，当有一个异步过程来获取其内容时，您有两种选择：

在组件中进行处理，并在组件尚无数据的情况下处理渲染（可能带有“正在加载”消息或类似消息）。
在拥有数据之前不要创建组件，这意味着要在父级中进行操作。

示例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>

我发现Dan Abramov的this article非常有用。表面上它与useEffect有关，但实际上与功能组件的生命周期和钩子有关。

Answer 2

T.J Crowder是对的，还因为发生的事情是完全正常的。

您正在做的事情是： -useEffect实际被触发之前的家 -触发useEffect -再次进行家庭渲染，因为调用了setItem

React Native-useEffect将渲染两次Home

2 个答案: