Переменная не обновляется внутри функции (с использованием ответных хуков) - PullRequest
Новая
       13

Переменная не обновляется внутри функции (с использованием ответных хуков)

0 голосов
/ 16 октября 2019

У меня есть этот код 

export const SearchWidget = memo(() => {
     . . . 
     const requestedProduct = useSelector(state => state.coverage.requestedProduct);
     . . .

    const addSearchWidget = () => {

        search = new Search({
            view: mapView,
            sources: [
                locatorSearchResource 
            ],
            container: searchContainer.current
        });

        search.on('select-result', (data) => {
            dispatch(actions.registerFoundLocation({
                 id: generateUniqueId(),
                 x: attr.x,
                 y: attr.y,
                 product: requestedProduct // <--- Always old value, 
                 // not updated from redux store!!! How to update it?
            }));
        });
    }

    useEffect(() => {
        addSearchWidget();
    }, []);

    return <div ref={searchContainer} />;

});

В диспетчерском вызове переменная "requiredProduct" всегда имеет старое значение, которое было получено при инициализации.

Как получить текущее значение "requiredProduct«

1 Ответ

1 голос
/ 16 октября 2019

Вам нужно передать requestedProduct в качестве зависимости для использованияEffect, чтобы ваши подписки получили обновленное значение. 

useEffect(() => {
    addSearchWidget();
}, [requestedProduct]);

или вы можете разделить создание и подписку на отдельные эффекты 

export const SearchWidget = memo(() => {
     . . . 
     const requestedProduct = useSelector(state => state.coverage.requestedProduct);
     . . .

    let search = null;
    useEffect(() => {
       search = new Search({
            view: mapView,
            sources: [
                locatorSearchResource 
            ],
            container: searchContainer.current
        });
    }, [])

    useEffect(() => {
        search.on('select-result', (data) => {
            dispatch(actions.registerFoundLocation({
                 id: generateUniqueId(),
                 x: attr.x,
                 y: attr.y,
                 product: requestedProduct
            }));
        });
    }, [requestedProduct]);

    return <div ref={searchContainer} />;

});

PS Также вы должны очистить подписки при создании новой подписки или при отключении

...