function 中的变量未更新（使用反应挂钩）

Question

I have this code

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

});

In dispatch call variable "requestedProduct" has always old value, which it got when it was initialised.

How to get current value of "requestedProduct"?

Answer 1

You need to pass requestedProduct as a dependency to useEffect so that your subscriptions get the updated value.

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

or you can split creating and subscription into separate effects

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 Also you must clear subscriptions when new subscription are created or on unmount