如何使用反应导航挂钩参数从其他屏幕更新状态反应本机挂钩？

Question

如何使用反应导航挂钩参数从其他屏幕更新状态反应本机挂钩？

我正在尝试从提供数据的屏幕 2 更新屏幕 1 中的状态 selectedHotel，因此我使用反应导航挂钩参数将屏幕 2 中的数据保存在参数中，数据已更新但我无法更新状态 selectHotel 如果数据存在于useEffect screen 1中，这里是代码：

屏幕 1：

import {useNavigation, useNavigationParam} from 'react-navigation-hooks';

const TransportScreen = () => {
    const hotelParam = useNavigationParam('hotel');
    const [baseLoading, setBaseLoading] = useState(true);
    const [selectedHotel, setSelectedHotel] = useState(
        hotelParam ? hotelParam.id : '',
    );
    const {navigate} = useNavigation();
    useEffect(() => {
        setTimeout(() => {
            setBaseLoading(false);
        }, 1000);
        if (hotelParam) {
            setSelectedHotel(hotelParam.id);
            console.log('update selected hotel', selectedHotel);
        }
    }, []);
    const redirectTransportSelectHotel = () => {
        console.log('select hotel');
        navigate('TransportSelectHotel');
    };
    const submitTransport = () => {
        console.log('getHotelId ', selectedHotel);
    };
    const renderContent = () => {
        console.log('hotelId: ', selectedHotel);
        if (!baseLoading) {
            return (
                <View
                    style={{
                        flex: 1,
                        flexDirection: 'column',
                        justifyContent: 'flex-start',
                    }}>
                    <MenuCard
                        expandRight
                        onPress={() => redirectTransportSelectHotel()}>
                        {hotelParam ? hotelParam.name : 'Select Hotel'}
                    </MenuCard>
                    <View
                        style={{
                            flex: 1,
                            flexDirection: 'column',
                            justifyContent: 'flex-end',
                        }}>
                        <View
                            style={{
                                flexDirection: 'row',
                                marginHorizontal: 40,
                                marginVertical: 20,
                            }}>
                            <Button onPress={() => submitTransport()}>Submit</Button>
                        </View>
                    </View>
                </View>
            );
        }
        return <LoaderScreen visible={baseLoading} />;
    };
};

屏幕 2：

import {useNavigation, useNavigationParam} from 'react-navigation-hooks';
import {useSelector, useDispatch} from 'react-redux';
import {getHotels} from './actions';
import _ from 'lodash';

const TransportSelectHotelScreen = () => {
    const {navigate} = useNavigation();
    const dispatch = useDispatch();
    const [baseLoading, setBaseLoading] = useState(true);
    const {hotel} = useSelector(state => ({
        hotel: state.transportHotelReducer,
    }));
    useEffect(() => {
        setTimeout(() => {
            setBaseLoading(false);
        }, 1000);
        loadHotels();
    }, [loadHotels]);
    const handleRefresh = () => {
        console.log('refresh');
        loadHotels();
    };
    const loadHotels = async () => {
        dispatch(getHotels());
    };
    const redirectTransportCallback = hotel => {
        console.log('hotel detail', hotel);
        navigate('Transport', {hotel: hotel});
    };
    const renderItem = item => {
        return (
            <MenuCard
                expandRight
                onPress={() => redirectTransportCallback(item.item)}>
                {item.item.name}
            </MenuCard>
        );
    };
    const renderContent = () => {
        if (!baseLoading) {
            if (!hotel.hotels.baseLoading) {
                if (!_.isEmpty(hotel.hotels)) {
                    return (
                        <View style={globalStyles.menuContainer}>
                            <FlatList
                                data={hotel.hotels}
                                renderItem={renderItem}
                                keyExtractor={(item, index) => index.toString()}
                                refreshing={hotel.isRefreshing}
                                onRefresh={handleRefresh}
                                // onEndReached={handleLoadMore}
                                // onEndReachedThreshold={0.1}
                            />
                        </View>
                    );
                } else {
                    return (
                        <View style={globalStyles.wrapperContent}>
                            <Text>{Lang.no_data}</Text>
                        </View>
                    );
                }
            }
            return <LoaderScreen visible={hotel.baseLoading} />;
        }
        return <LoaderScreen visible={baseLoading} />;
    };
};

Answer 1

你可以试试

useEffect(() => {
  setSelectedHotel(hotelParam ? hotelParam.id : '')
}, [hotelParam])