如何從內部使用 promise 獲取值的反應掛鈎返回 function

Question

我是 React 新手，想創建一個反應鈎子，它返回一個 function ，這個 function 在內部使用 promise 來獲取實際值。 這是我的示例代碼 -

export const useMyCustomHook = () => {

    let transKey = "";
    const [value, setValue] = useState("");
    const service = useContext(serviceContext);

    const getValue = (key: string) => {
        transKey = key
        return value
    }

    useEffect(() => {
        if (service) {
            service.GetValue(transKey).then((res: any) => {
                setValue(res);
            });
        }
    }, []);

    return getValue;
};

這是用法 -

const getValue = useMyCustomHook()

return (
    <div className="childComponent">
        <p>Page Title: {getValue('Key1')}</p>
        <p>Page Title: {getValue('Key2')}</p>
    </div>
)

每次通話我都得到相同的價值。

Answer 1

與其返回 function，不如直接返回一個值：

 export const getValue = (transKey) => { const [value, setValue] = useState(""); const service = useContext(serviceContext); useEffect( () => { service?.GetValue(transKey).then(setValue); }, // TODO: cleanup [service, transKey]); return value; }; // ----------------- return ( <div className="childComponent"> <p>Page Title: {getValue('Key1')}</p> <p>Page Title: {getValue('Key2')}</p> </div> )