react-component / react-component/input-number

最新版本的react-hook-form和rc-input-number是9.3.0版本时出现Illegal invocation错误

Open
#684 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
323
Forks
188
Avg merge
20h 3m
Merged PRs (30d)
1

Description

"react": "18.3.1",
"react-dom": "18.3.1",
"rc-input-number": "^9.3.0",
"@hookform/resolvers": "^3.9.1",
"react-hook-form": "^7.54.1",

用以上版本时,
如下代码
import { Box, Form } from 'grommet';
import { z } from 'zod';
import { SubmitHandler, useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import InputNumber from 'rc-input-number';

const zodFormSchema = z.object({
orderQty: z.coerce.number().positive('必须正数'),
});

type ZodFormFieldsProps = z.infer;
/**

  • 测试inputNumber组件
  • */
    export default function TestInputNumber() {
    const { register, handleSubmit, setValue } = useForm({
    resolver: zodResolver(zodFormSchema),
    });

const onOrderQtyChange = (val: string | number | null) => {
setValue('orderQty', val ? parseFloat(val + '') : 0, {
shouldValidate: true,
shouldTouch: true,
shouldDirty: true,
});
};
const onFormSubmit: SubmitHandler = (formData) => {
console.log('formData', formData);
};

return (


<InputNumber
{...register('orderQty')}
min={0}
step={1}
onChange={onOrderQtyChange}
/>


);
}

会报
hook.js:608 React Router caught the following error during render TypeError: Illegal invocation
at Proxy.set (react-dom.development.js:1661:1)错误
但是如果将"rc-input-number": "^9.0.0",改为此版本,上面其他内容都不变,则不会报错,使用正常

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the supplied TypeScript example with React 18.3.1, react-hook-form 7.54.1, and rc-input-number 9.3.0, then compare the same example with rc-input-number 9.0.0. Trace the reported React DOM Proxy.set Illegal invocation and add a regression test showing that the form interaction no longer throws.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.