给React项目集成Zustand出现编译及运行时错误求助

编译错误（TS2345）修复 #

这个错误源于ReactDOM.createRoot().render()方法被传入了多余的逗号，触发TypeScript类型校验失败。

错误代码示例 #

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>, // 此处多余的逗号导致类型报错
);

修复后代码 #

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

运行时错误（Invalid hook call）修复 #

这个错误是因为你在事件处理函数内部调用了Zustand的store方法——Zustand通过create创建的store本质是React Hook，必须严格遵循Hook规则：只能在组件顶层调用，不能嵌套在事件处理、循环或条件判断中。

错误代码示例 #

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const { loginUser } = authStore() // 在事件处理函数内调用Hook，违反规则
  // ...
};

修复后代码 #

const Login: FC = () => {
  const Navigate = useNavigate();
  const [errorMessage, setErrorMessage] = useState('');
  // 在组件顶层解构loginUser，符合Hook规则
  const { loginUser } = authStore();
  
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    try {
      loginUser(event.currentTarget.email.value, event.currentTarget.password.value)
    } catch (error) {
      console.log(error)
      setErrorMessage((error as Error).message) // 可选：将错误信息展示给用户
    }
  };
  
  // ... 其余组件代码保持不变
};

额外优化建议 #

你的Zustand store中可以合并两次set调用，减少状态更新次数：

loginUser: async (email: string, password: string) => {
    const {data, error} = await supabase.auth.signInWithPassword({email, password})
    console.log(data);
    // 合并状态更新操作
    set({ 
      user: data.user,
      session: data.session 
    });
    if (error) throw error
}

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