Question

如何使用React Navigation Hook参数从其他屏幕更新状态React本机Hook？

我正在尝试从提供数据的屏幕2更新屏幕1中的状态selectedHotel，因此我使用react navigation hooks params将屏幕2中的数据保存在参数中，数据已更新，但如果有数据我无法更新状态selectHotel在useEffect屏幕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])

如何使用react navigation hook参数更新其他屏幕上的本机钩子状态？

1 个答案: