在状态react中存储api结果时setState最佳实践

Question

通常我尝试使用像react-query这样的辅助库来显示和操作应用程序中的数据，从而最大限度地减少状态的使用。然而现在我正在开发一个基本上基于巨大表单的应用程序。我得到一个模型，解析它，填充字段。这些领域也是动态的。所有更改都必须在保存按钮下完成，所以我需要一个状态。现在我有一些问题

假设模型具有特定数量的步骤，这些步骤表示为选项卡和区域设置，由用户之前设置。加载数据后，我需要将其同步到组件状态

  const [model, setModel] = React.useState<IModelData>()
  const [currentLocale, setCurrentLocale] = React.useState(defaultLocale)
  const [selectedStep, setSelectedStep] = React.useState<Step | null>(null)

  const { model: modelResp, loading } = useModelApiCall(id)
  useEffect(() => {
    setModel(modelResp)
    modelResp?.locales?.[0] && setCurrentLocale(modelResp.locales[0])
    modelResp?.steps[0] && setSelectedStep(modelResp.steps[0])
  }, [modelResp])

老实说我不高兴，因为除了这个之外还有很多其他逻辑。然而，由于大多数数据我需要允许用户输入，所以我没有找到任何其他方法。

1. 我可能会使用react-hook-form来处理管理状态，但我担心它可能会成为瓶颈，因为模型很大，我需要解析输入
2. 由于我还需要允许用户输入的可能性，除了存储大量状态之外，您还有其他想法吗？
3. 您认为做

   modelResp?.locales?.[0] && setCurrentLocale(modelResp.locales[0])

   而不仅仅是

   setCurrentLocale(modelResp?.locales?.[0])

   有用还是无用。对我来说这是有道理的，因为为什么我要冒设置

   undefined

   状态的风险，但我看重易于阅读和理解的代码。

如果是这样，我可能会将其分离到一个仅获取数据的包装布局容器和另一个创建并同步下面一层状态的容器中，但它基本上是相同的东西，更具可读性。

欢迎提出任何想法

Answer 1

为什么不将整个表单保存在一种状态的对象中，然后使用点符号在表单中设置默认值？例如：

<form onSubmit={(e)=>PostFormData(e, apiFormData, setApiFormData)>
  <input type="text" id="firstName" defaultValue={apiFormData.firstName?.toString()}/>
  <input type="text" id="lastName" defaultValue={apiFormData.lastName?.toString()}/>
</form>

这样，您就不必为表单中的每个输入创建状态。