React-Hook Form:如何将数量的值转换为 useFieldArray 内的数字?

React-Hook Form: How do I convert the value of the quantity into a number that is inside the useFieldArray?

我已经声明 input 只接收号码:

  <input
              type="number"
              name={`order[${nestIndex}].variantion[${k}].qty`}
              ref={register({ required: true })}
              defaultValue={item.qty}
              style={{ marginRight: "25px" }}
            />

但这仍然会保存为字符串。如何将 quantity 的值转换为数字,或者是否可以将其解析为整数?

数量输入字段在nestedFieldArray

export default ({ nestIndex, control, register }) => {
  const { fields, remove, append } = useFieldArray({
    control,
    name: `order[${nestIndex}].variation`
  });

  return (
    <div>
      {fields.map((item, k) => {
        return (
          <div key={item.id} style={{ marginLeft: 20 }}>
            <label>{k + 1}</label>

            <input
              type="number"
              name={`order[${nestIndex}].variantion[${k}].qty`}
              ref={register({ required: true })}
              defaultValue={item.qty}
              style={{ marginRight: "25px" }}
            />

            <Size
              name={`order[${nestIndex}].variantion[${k}].color`}
              menuItems={colorItems}
              refer={register({ required: true })}
              defaultValue={item.color}
              control={control}
            />
          </div>
        );
      })}
      <hr />
    </div>
  );
};

我在以下位置重新创建了这个:https://codesandbox.io/s/react-hook-form-data-in-step-1-and-step-2-with-nestedarray-7hyksh?file=/src/nestedFieldArray.js:485-1532

这是数据在控制台中的样子:

在处理程序提交时,您可以使用 parseInt() 将产品数量更改为整数,并将其推送到新的子数组中,在所有产品详细信息转换后,您可以推送它进入新的父数组。

const onSubmit = (data) => {
    const newOrder = [];
    data.order.forEach(({ product, variantion }) => {
      const newVariantion = [];
      variantion.forEach(({ qty, color }) => {
        newVariantion.push({ qty: parseInt(qty), color });
      });
      newOrder.push({ product, variantion: newVariantion });
    });

    action(newOrder);
    console.log(newOrder);

    push("/step2");
  };