时间戳

首页 > 解决方案 > 尝试正确输入提供程序

reactjs - 尝试正确输入提供程序

问题描述

我正在尝试获取以下权利的 Provider 类型：

interface IAuthContext {
  auth: {
    user: IUser | null
    authenticated: boolean
  }
  logout: () => Promise<void>
}

const logout = useCallback(
  () =>
    fetch("http://localhost:4000/logout").then(() =>
      setAuth({ user: null, authenticated: false })
    ),
  []
)

const memo = useMemo(
  () => ({
    auth,
    setAuth,
  }),
  [auth, setAuth]
)

问题就在这里

return (
  <authContext.Provider value={[memo, logout]}>

Type '((() => Promise<void>) | { auth: { user: null; authenticated: boolean; }; setAuth: Dispatch<SetStateAction<{ user: null; authenticated: boolean; }>>; })[]' is missing the following properties from type 'IAuthContext': auth, logout

我能做些什么来解决这个错误？

标签： reactjstypescript

解决方案

它失败是因为prop 与接口value不匹配。您正在传递一个不正确IAuthContext的两个对象的数组。[memo, logout]您需要传递一个 shape 的对象{auth, logout}。我不知道您的代码是什么样的，但我认为它类似于下面的代码。我改变了memo并修复了value道具。

interface IAuthContext {
    auth: {
        user: string | null;
        authenticated: boolean;
    };
    logout: () => Promise<void>;
}

const authContext = React.createContext<IAuthContext>(null);

const Test: React.FC = () => {
    const [auth, setAuth] = useState<IAuthContext['auth']>(/*someInitialValue*/);

    const logout = useCallback(
        () => fetch('http://localhost:4000/logout').then(() => setAuth({ user: null, authenticated: false })),
        []
    );

    const memo = useMemo(() => {
        return {
            ...auth,
        };
    }, [auth]);

    return <authContext.Provider value={{ auth: memo, logout }}>BLAH</authContext.Provider>;
};

推荐阅读