umi

umi copied to clipboard

What happens?

umi4 model 中使用并导出 query-string 的 parse() 的返回值时，当 model 更新时会出现整个 model 返回值是 undefined 的情况，qs 则不会有这个问题，copy 一下 parse() 返回值再导出，也不会有问题

Mini Showcase Repository(REQUIRED)

Please provide a minimal reproduction then upload to your GitHub. 请提供 最小重现，并上传到你的 GitHub 仓库

最小复现：https://github.com/hanzebang/umi4-demo/tree/debug/models/querystring

How To Reproduce

Steps to reproduce the behavior: 1. 2.

Expected behavior 1. 2.

1. git clone https://github.com/hanzebang/umi4-demo.git --branch debug/models/querystring
2. pnpm i
3. pnpm dev
4. 访问：http://localhost:8000/test ，此时 model 正常
5. 点击 setState 按钮，报错 TypeError: Cannot read properties of undefined (reading 'setState')，useModel 的返回值变成 undefined 了

Context

• Umi Version: 4.0.12
• Node Version: v16.13.2
• Platform: mac/windows

parse中的返回，是基于 Object.create(null) 生成的对象。

https://github.com/sindresorhus/query-string/blob/a5ed7eaf496b47e0cd7f6071a56ac297c8e280e4/index.js#L307

umi中基于 fast-deep-equal 进行前后状态对比

https://github.com/umijs/umi/blob/a8487f14fde236e16b3ca49a2d47630ed385a9ea/packages/plugins/libs/model.tsx#L162-L164

fast-deep-equal 对于 Object.create(null)生成的对象未做兼容，其中调用对象的 valueOf方法报错。导致最后 model拿到的是 undefined。

issue: https://github.com/epoberezkin/fast-deep-equal/issues/111

在返回层可以做个兼容

export default () => {
  const [, setState] = useState<number>(0);
  const query = parse('?a=1');
  return { setState, query: { ...query } };
};