Как сделать рендеринг компонента при возврате с помощью кнопки «Назад» в «Реагировать нативно»

Question

Если я go с главного экрана на экран сведений о продукте, а затем на экран корзины, обновление состояния работает нормально, но с экрана корзины, если я добавляю или удаляю элементы, а затем возвращаюсь к сведениям о продукте или главному экрану, состояние отображается не обновляется почему так? См. Ссылку vudeo ниже: https://drive.google.com/file/d/1AjrFMAXBs9Gzc5Onbm1uf-eW9gFfHxMU/view?usp=sharing

Я использую избыточность, но даже если состояние хранилища избыточности обновляется, он не отображает компонент с обновленным состоянием, почему так?

Я думаю об использовании реагирующих событий навигации, но получаю ошибку, почему так? Как решить проблему? это проблема с избыточностью или реакция на проблему навигации? Повторно визуализируется ли компонент при переходе на предыдущий экран?

Если я обновлю sh экран эмулятора, тогда состояние обновится и отобразится правильно, почему это происходит?

Я хочу выполнить рендеринг Домашний компонент, когда сосредоточен назад, но получает ошибку. почему так?

Снимок экрана:

Код:

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

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