React中将.then写法改为async/await出现未处理rejection错误如何解决

• 错误1：useEffect 不支持直接传入 async 回调
  React 要求 useEffect 的回调函数只能返回清理函数或 undefined，你直接在 useEffect 回调中使用 await，相当于让回调返回了 Promise 实例，这个 Promise 抛出的错误不会被 React 内置逻辑处理，会直接冒泡触发全局报错。
• 错误2：try/catch 位置完全错误
  你当前的 try/catch 包裹的是同步执行的 useEffect 调用逻辑，而 getusers 是异步函数，它抛出的错误属于异步任务的异常，外层同步的 try/catch 根本无法捕获，未被捕获的异常就会触发应用的错误界面。
• 错误3：状态更新函数大小写笔误
  原教程中使用的状态更新函数是setUser，你改写的代码中写成了setuser，如果你的状态定义时用的是驼峰命名的setUser，这个笔误也会导致运行时异常。

useEffect(() => {
  const getusers = async () => {
    try {
      const resp = await fetch(url);
      if (resp.status >= 200 && resp.status <= 299) {
        const user = await resp.json();
        const { login } = user;
        setUser(login);
        setIsLoading(false);
      } else {
        setIsLoading(false);
        setIsError(true);
        throw new Error(resp.statusText);
      }
    } catch (error) {
      console.log(error);
    }
  };

  getusers();
}, []);

• 将异步函数 getusers 的定义放在 useEffect 回调内部，避免不必要的依赖声明
• 把 try/catch 放在 getusers 函数内部，直接捕获异步请求过程中抛出的所有错误，和原教程 .catch 的逻辑完全对齐，错误只会被打印不会冒泡触发全局错误界面
• 修正了状态更新函数的大小写笔误，和原教程逻辑保持一致

内容的提问来源于stack exchange，提问作者calixlete