redux 如何在react native中使用back按钮返回时重新渲染组件？

b91juud3 于 12个月前发布在 React

关注(0)|答案(2)|浏览(166)

如果我从主屏幕到产品详细信息屏幕，然后到购物车屏幕，然后状态更新工作正常，但从购物车屏幕，如果我添加项目或删除项目，然后导航回产品详细信息或主屏幕，然后状态不更新，为什么？请参阅下面的vudeo链接：https://drive.google.com/file/d/1AjrFMAXBs9Gzc5Onbm1uf-eW9gFfHxMU/view?usp=sharing
我正在使用redux，但即使redux商店状态更新，它仍然不会呈现更新状态的组件，为什么呢？
我想使用React导航事件，但我得到错误为什么？如何解决这个问题？这是redux问题或React导航问题？组件重新渲染时，导航回上一个屏幕？
如果我刷新模拟器屏幕，然后状态更新并正确显示，为什么会发生这种情况？
我想重新呈现主页组件时，重点回来，但得到错误。为什么呢？
截图：

的数据
代码：
home.js:

import React, {useState, useEffect} from 'react';
import {
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
    Image,
    TouchableOpacity,
    Button
} from 'react-native';
import Product from '../product/product';
import { useFocusEffect } from '@react-navigation/native';
import axios from 'axios';

export const Home = (props) => {

    const [categories, setCategories] = useState([]);

    useFocusEffect(
        React.useCallback(() => {
            const unsubscribe = FetchCategoryData();

            return () => unsubscribe();
        }, [])
    );

    const FetchCategoryData = () => {

        axios.get(`http://localhost:5000/api/categories`)
            .then(res => {
                console.log("All categories: ", res.data.data);

                setCategories([...res.data.data]);

                console.log("useeffect categories",categories)
            })
            .catch(error => console.log("Error: ", error))
    }

    return(
        <ScrollView style={styles.root}>
            <View style={{marginTop: 15, marginLeft: 15, marginBottom: 15}}> 
                <ScrollView horizontal={true} style={styles.container}>
                    <TouchableOpacity>
                        <View style={{marginRight: 15}}>
                            <Image source={require('../../assets/img/fruits.jpg')} style={{width: 325, height: 200, borderRadius: 10}}/>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <View style={{marginRight: 15}}>
                            <Image source={require('../../assets/img/grocery.jpg')} style={{width: 325, height: 200, borderRadius: 10}}/>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity>
                        <View style={{marginRight: 15}}>
                            <Image source={require('../../assets/img/fruits.jpg')} style={{width: 325, height: 200, borderRadius: 10}}/>
                        </View>
                    </TouchableOpacity>
                </ScrollView>
            </View>
            {categories && categories.length > 0 ? categories.map(val => <CategoryList key={val._id} category={val.name} navigation={props.navigation}/>) : null}
        </ScrollView>
    )
}

字符串

redux

来源：https://stackoverflow.com/questions/60362589/how-to-re-render-component-on-going-back-using-back-button-in-react-native

2条答案

按热度按时间

qij5mzcb1#

请访问reactnavigation.org/docs/function-after-focusing-screen。
简而言之，使用

const isFocused = useIsFocused();

字符串
在你的组件中的某个地方，将强制重新呈现，每次窗口被聚焦或未聚焦。
useIsFocused钩子将导致我们的组件在我们聚焦和取消聚焦屏幕时重新呈现。使用此钩子组件可能会在屏幕聚焦和取消聚焦时引入不必要的组件重新呈现。这可能会导致问题，具体取决于我们在聚焦时调用的操作类型。因此，我们建议仅在需要触发重新呈现时使用此钩子。对于侧边-诸如订阅事件或获取数据的效果使用上述方法。

赞(0）回复(0）举报 12个月前

oug3syen2#

React Navigation在返回时不会重新渲染屏幕。这是为了让你的屏幕不必在每次导航时重新获取数据或显示加载指示符。如果你想在屏幕上执行一些更新，请尝试阅读此内容。
简而言之，React Navigation让你可以订阅导航事件，比如屏幕刚刚聚焦的时候：

export default class Screen extends Component {

    navigationSubscription;

    componentDidMount() {
        // Fetch initial data and add navigation listener
        // ...

        this.navigationSubscription = this.props.navigation.addListener('didFocus', this.onFocus);
    }

    componentWillUnmount() {
        this.navigationSubscription.remove();
    }

    // This function will be called everytime this screen is shown
    onFocus = (payload) => {
        console.log(payload);
        // You can then check for updates here
    }

    render() {
        return (
            <Text>I'm a screen</Text>
        );
    }
}

字符串

赞(0）回复(0）举报 12个月前

我来回答

redux 如何在react native中使用back按钮返回时重新渲染组件？

2条答案

相关问题

热门标签

最新问答