如何在本机反应中使用后退按钮重新渲染组件？

Question

如果我从主屏幕转到产品详细信息屏幕，然后再到购物车屏幕，则状态更新工作正常，但如果我从购物车屏幕添加商品或删除商品，然后导航回产品详细信息或主屏幕，则状态不会更新为什么这样？请参阅下面的视频链接：https://drive.google.com/file/d/1AjrFMAXBs9Gzc5Onbm1uf-eW9gFfHxMU/view?usp=sharing

我正在使用 redux，但即使 redux 存储状态已更新，它仍然不会呈现具有更新状态的组件，为什么会这样？

我正在考虑使用反应导航事件，但我收到错误，为什么会这样？如何解决问题？这是redux问题还是反应导航问题？导航回上一个屏幕时组件是否会重新渲染？

如果我刷新模拟器屏幕，那么状态会更新并正确显示，为什么会发生这种情况？

我想在返回焦点但出现错误时重新渲染 Home 组件。为什么这样？

截图：

代码：

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>
    )
}

Answer 1

查看reactnavigation.org/docs/function-after-focusing-screen。

简而言之，使用

const isFocused = useIsFocused();

在您的组件中的某处，每次窗口聚焦或不聚焦时都会强制重新渲染。

Answer 2

React Navigation 在返回时不会重新渲染屏幕。这样您的屏幕就不必在每次导航时重新获取数据或显示加载指示器。如果您想在屏幕上执行一些更新，请尝试阅读this。

简而言之，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>
        );
    }
}