Typescript 抱怨 React useState setter `Argument of type 'Dispatch <setstateaction<never[]> &gt;' 不可分配给参数</setstateaction<never[]>

Question

Presume I have this react component

export default function Restaurants() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then(setUsers);
  })
  ...

and User.ts is

interface User { name: string; }
export function fetchUsers(): Promise<User[]> { return fetch(...).then(r => r.json()) }

TypeScript is throwing Argument of type 'Dispatch<SetStateAction<never[]>>' is not assignable to parameter of type '(value: User[]) => void | PromiseLike<void>'. Types of parameters 'value' and 'value' are incompatible. Type 'IRestaurant[]' is not assignable to type 'SetStateAction<never[]>'. Type 'IRestaurant[]' is not assignable to type 'never[]'. Type 'IRestaurant' is not assignable to type 'never'.ts Argument of type 'Dispatch<SetStateAction<never[]>>' is not assignable to parameter of type '(value: User[]) => void | PromiseLike<void>'. Types of parameters 'value' and 'value' are incompatible. Type 'IRestaurant[]' is not assignable to type 'SetStateAction<never[]>'. Type 'IRestaurant[]' is not assignable to type 'never[]'. Type 'IRestaurant' is not assignable to type 'never'.ts

I tried const [users, setUsers]: [User[], Function] = useState([]); but that also didn't solve the issue How can I solve this issue?

Answer 1

You need TS to be able to infer at the time that you call useState what sort of value it will contain.

Since it's going to be an array of User s, use that for the generic:

const [users, setUsers] = useState<User[]>([]);

I'd also highly recommend not ignoring errors - unhandled rejections should be avoided whenever possible.

fetchUsers()
  .then(setUsers)
  .catch(handleErrors);

You also probably only want to fetch the users once , rather than every time the component mounts.

useEffect(() => {
  fetchUsers()
    .then(setUsers)
    .catch(handleErrors);
}, []);