Attack on Life ⚔️

lodash错误使用导致的体积问题

发表于 2024-12-11 更新于 2025-01-15 本文字数： 645 阅读时长 ≈ 1 分钟

实际项目中看到lodash的导入使用存在问题，这里mark下。

问题

package.json中依赖是lodash即cjs lodash。


import _ from 'lodash';

import { cloneDeep } from 'lodash';

上述方式下，无路是哪个打包都是全量的。

阅读全文 »

react-hook-form中的useFieldArray

发表于 2024-12-06 更新于 2025-01-15 本文字数： 1.2k 阅读时长 ≈ 2 分钟

在处理表单校验/交互操作时，经常会用到react-hook-form。之前没注意其提供的useFieldArray，最近在CR时看到有这个写法才了解了下。这里mark下其使用。

场景

在表单处理时，有时会需要处理数组表单项，比如用户可以动态添加N行的表单项。那么useFieldArray就可以面向于这种数组处理的。

例子

function FormTest() {
  const {control, register, getValues} = useForm();
  const {fields, append, prepend, remove, swap, move, insert} = useFieldArray({
    control, // control props comes from useForm (optional: if you are using FormProvider)
    name: "test", // unique name for your Field Array
  });

  console.log(fields, 'fields');
  return (
    <form>
      {fields.map((field, index) => (
        <div><input
          key={field.id} // important to include key with field's id
          {...register(`test.${index}.value`)}
        /></div>
      ))}

      <Button onClick={() => {
        append({
          value: 1,
        })
      }}>
        Add
      </Button>
      {
        JSON.stringify(getValues())
      }
    </form>
  );
}