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

问题描述

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

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

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

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

我想在重新聚焦但出现错误时重新渲染 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>
    )
}

标签： javascriptreactjsreact-nativeredux

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

问题描述

解决方案

推荐阅读