function 中的變量未更新（使用反應掛鈎）

Question

我有這個代碼

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

});

在調度調用變量“requestedProduct”中總是有舊值，它是在初始化時得到的。

如何獲得“requestedProduct”的當前值？

Answer 1

您需要將requestedProduct作為依賴項傳遞給 useEffect 以便您的訂閱獲得更新的值。

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 此外，您必須在創建新訂閱或卸載時清除訂閱