在React Hook中将userState的useState设置为什么

Question

我是钩子的新手。不确定初始值应设为useState。

现在，空对象const [user, setUser] = useState({});被设置为useState的默认值，并导致${crafter.id} 抱怨id，因为没有属性id，因为我试图使用默认状态设置为{}。

UserProfile.tsx

interface UserProfileProps {
  userId: number;
  findUser: (userId: number) => Promise<User>;
}

const UserProfile = (props: UserProfileProps) => {
  const { userId, findUser } = props;
  const [user, setUser] = useState({});

  useEffect(() => {
    const fetchUser = async () => {
      const user: User = await findUser(userId);
      setUser(user);
    };

    fetchUser();
  }, []);

  return (<div>User Id: ${user.id}</div>);
};

export default UserProfile;

Answer 1

您应该将通用参数传递给useState，以便TypeScript知道值的类型。

还要确保仅在检索到用户后尝试尝试进入id属性，这可以通过可选的链接来完成，并且请注意，您无需键入user User，因为已知findUser返回Promise<user>：

const UserProfile = (props: UserProfileProps) => {
  const { userId, findUser } = props;
  const [user, setUser] = useState<User>(); // <---------------

  useEffect(() => {
    const fetchUser = async () => {
      const user = await findUser(userId);
      setUser(user);
    };

    fetchUser();
  }, []);

  return (<div>User Id: ${user?.id}</div>);
  // could also only return this div if the user has been retrieved,
  // and return an empty element instead, if you wanted
};