A quite common TypeScript error TS2349 that sth has no call signatures
.
In different situations, it solves with different workarounds. But dealing with a react's Context the optimal solution I've found is using // @ts-ignore
.
Please, what is the right approach in this case?
// auth.tsx
import { CurrentUserContext } from 'components/currentUser';
import React, { useState, useEffect, useContext } from 'react';
const Auth = ({ onLogin }: {onLogin: any}) => {
const [, setCurrentUserState] = useContext(CurrentUserContext);
const [credentials, { data }] = useMutation(AUTH);
...
useEffect(() => {
if (data) {
// TypeScript Error without @ts-ignore:
// This expression is not callable.
// Type '{}' has no call signatures. TS2349
// @ts-ignore
setCurrentUserState((state: any) => ({
...state,
currentUser: data.login.author,
}))
}
}, [data, setCurrentUserState]);
return <div>{data.login.author}</div>
}
// currentUser.tsx
import React, { createContext, useState } from 'react';
const CurrentUserContext = createContext([{}, () => {}]);
const CurrentUserProvider = ({ children }: {children: any}) => {
const [state, setState] = useState({
currentUser: null,
})
return (
<CurrentUserContext.Provider value={[state, setState]}>
{ children }
</CurrentUserContext.Provider>
)
};
export {
CurrentUserContext,
CurrentUserProvider,
}
n.b. "react" : "^16.13.1" "typescript": "~3.7.2"
Describe and explicitly specify the types:
type IUserState = {
currentUser?: object;
};
type ICurrentUserContext = [IUserState, React.Dispatch<React.SetStateAction<IUserState>>];
const CurrentUserContext = React.createContext<ICurrentUserContext>([{}, () => null]);
const CurrentUserProvider = ({ children }: { children: any }) => {
const [state, setState] = useState<IUserState>({
currentUser: null,
});
return <CurrentUserContext.Provider value={[state, setState]}>{children}</CurrentUserContext.Provider>;
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With