React useState将大对象的初始状态设置为null

Question

我使用钩子已有一段时间了，我以为我了解基本知识，但是从昨天开始，我的代码中就有一个错误，使我感到有些不知所措。 我认为代码很简单：

const initialState = {
  userId: "",
  clientId: "",
  discount: "",
  paymentMethod: "CASH",
  medicalInurance: "",
  total: "",
  pending: "",
  detail: [
    {
      product: { 
        id: 1, 
        name: "u1v-13cs" 
      },
      unitPrice: 1500,
      totalPrice: 2400,
      discount: 20,
      quantity: 2
    }
  ],
  payments: {
    amount: 1000,
    invoice: "REGULAR",
    paymentMethod: "CASH"
  }
};

function sale = () => {
  const [values, setValues] = React.useState(initialState);
  return <FormSteps values={values} />
}

如您所见，代码非常简单，但是初始状态却很大。错误是该大对象的状态设置为null。 如果我简单地删除一些像这样的键：

const initialState = {
  userId: "",
  clientId: "",
  discount: "",
  paymentMethod: "CASH",
  insurance: "",
  total: "",
  pending: ""
};

它可以按预期工作，并且初始状态设置正确。

我知道我可以简单地分割初始状态，但是这使我的逻辑与其他类似的表单组件有所不同，因此我首先想了解这种行为。