React 开发错误记录

长期更新，未完待续…

正文

1. Error: Rendered fewer hooks than expected. This may be caused by an accidental early return state…

hooks函数的调用问题，简单来说，不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。

2. Error：Ts1261，引入文件路径错误

ts的报错，笔者在写路由时文件引入错误，大概意思为无法找到你想引入的那个module。这时，如果你已经反复确认没写错路径，重启idea即可。

3. vite 卡错误

环境 vite 2.6.4
笔者现在参与的项目使用vite启动，当你页面出错时，修改后会发现报错依旧还在。即使你清除idea缓存，浏览器缓存等，也不可以。执行vite lint即可

4. Error: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead

React不能在jsx中直接渲染对象，你可以渲染它的属性。

5. 🐛BUG: ProComponent 在tablecolumns下拉列表中，如果使用request异步请求并渲染，则可能请求多次。

未解决，代替方案为在入口文件初始化时请求，在渲染为下拉列表时直接使用数据，而不是请求。

6. 🐛BUG：ProTable执行异步更新操作，列表不刷新。

环境：mobx 6.3.6 @ant-design/pro-table 2.58.1

• 执行异步更新操作后回调函数，会调用activeStore.reload()方法
• activeStore在初始化列表完成后（包括默认网络请求完成），通过useContext取到的值为undefined

// mobx 中的代码
get activeStore(): ViewListStore<LevelModel, { divisionID: string }> | undefined {
   return this.levelStoreMap.get(this.activeKey);
}

// columns 中的代码
const {
  activeStore,
  modalStore: { openModal },
} = useContext(LevelContext);

// 更新操作的代码
const updateStatusStore = useSubmitStore(
  (params) => fetchPut(`my url`, params),
  {
    successCallback: () => {
      activeStore?.reload();
    },
  }
);

• 其中的reload方法，必须在activeStore有定义的情况下才会被调用
• 故大致思路，改为动态调用activeStore的get方法，而不是在初始化时，直接拿到其get的返回值

// columns 中的代码
const context = useContext(LevelContext);
const {
  modalStore: { openModal },
} = context;

// 更新操作的代码
const updateStatusStore = useSubmitStore(
  (params) => fetchPut(`my url`, params),
  {
    successCallback: () => context.activeStore?.reload(),
  }
);

7.