调试这些东西

初学者认为经验丰富的开发者不会犯错。

事实并非如此。

经验丰富的开发者只是能更快地发现并修复错误。

我最近使用 React、Zustand、Express、Prisma 和 PostgreSQL 构建了一个全栈项目管理应用。我遇到了几十个小 bug。这些 bug 教会了我现代前端应用是如何运作的。

以下是我学到的教训：

  • React useEffect 与 Async 你不能直接将一个 async 函数传递给 useEffect。React 期望的是一个清理函数（cleanup function）或者什么都不返回。而 async 函数返回的是一个 Promise，这违反了该规则。你应该在 effect 内部使用一个函数。

  • 被遗忘的函数 我曾经在 useEffect 内部写了一个 async 函数，但从未实际调用过它。组件挂载了，但什么也没发生。有时候，bug 仅仅是因为漏掉了函数调用。

  • Axios 数据结构 Axios 返回的是一个对象。你的数据存在 response.data 中。如果你尝试将整个 response 保存到你的 state 中，你的应用就会出错。

  • URL 重复 我的 Axios 实例已经设置了 base URL，但我又在请求中添加了 API 前缀。这导致出现了像 /api/api/projects 这样的重复路径。务必检查你的抽象层。

  • 导航错误 Navigate 组件仅在渲染期间有效。如果你想在点击后跳转用户，请改用 useNavigate hook。

  • 后端契约 我的后端发送了一个名为 accessToken 的属性，而我的前端在寻找名为 token 的属性。因为名称不匹配，我的 auth state 一直是 undefined。前端和后端必须始终使用相同的名称。

  • 时序问题 我的应用尝试在用户登录前获取通知。这导致了 401 错误。解决办法不是不检查通知，而是在发起请求前先检查身份验证状态。

最大的教训在于我的工作流。停止瞎猜。

请改用以下流程：

  • 检查浏览器控制台。
  • 检查 Network 面板。
  • 检查 API 响应。
  • 验证后端契约。
  • 检查你的 state。
  • 追踪数据从数据库到 UI 的流向。

软件开发不在于打字有多快，而在于理解数据的流动方式。教程展示的是坦途，而项目教会你的是实战之路。

去构建一些真实的东西吧。Bug 会比任何教程教给你的都多。

Source: https://dev.to/chinwuba_jeffrey/debugging-this-stuff-59b5