React 中的表单管理和处理 API 调用

Question

我正在创建一个 React 应用程序，它的表单由 14 个输入字段和 10 个 api 调用组成。我想在我的 React 应用程序中存储 10 个 api 调用和 14 个输入字段的值。为了管理表单，我应该使用 Hooks 或 react-hook-form。为了管理 api 调用，我应该使用哪个库 Tanstack-query 或 axios？对于存储 24 个（14 个输入和 10 个 api）值，最好的方法是 Redux-Toolkit 或 Hooks？存储、管理和处理这些数据的结构应该是什么？下面的结构是在react-app中管理api和inp值的最佳方法，或者有更好的方法来管理它？

const {apiValue, setApiValue} = useState({
  api1: [],
  api2: [],
  .
  .
  .
  api10: []
})

const {inpVal, setInp} = useState({
  fName: '',
  lName: '',
  age: '',
  number: '',
  .
  .
  .
  inp14: ''
})

Answer 1

形成状态管理

如果表单相对简单，并且您不需要很多特定于表单的功能，那么使用 React Hooks (

useState

) 可能就足够了。

如果您的表单更复杂，并且需要表单验证、条件渲染或高效重新渲染等高级功能，请考虑使用专用表单库，例如

react-hook-form

。它可以简化您的代码并有效地处理各种表单相关的任务。

API调用

axios

，是一种广泛使用的用于进行 API 调用的 HTTP 客户端。它很简单，并且适用于基本用例。

如果您想要一个具有缓存、自动重新获取和状态管理等功能的更复杂的解决方案，您可以考虑使用

Tanstack-query

。

存储 24 个值的状态管理

如果您的应用程序不太复杂，并且您预计不需要全局状态管理解决方案，那么使用 React Hooks (

useState

) 可能就足够了。

如果您的应用程序预计会变得更加复杂，或者您需要集中式状态管理解决方案，则可以考虑使用

Redux-Toolkit

。它可以帮助以更有组织的方式管理状态，并提供高效状态更新的工具。

总而言之，这些选项之间的选择取决于您应用程序的具体要求和复杂性。对于更简单的应用程序，React Hooks 和 axios 可能就足够了，而对于更复杂的应用程序，

react-hook-form

、

Tanstack-query

和

Redux-Toolkit

可以提供额外的好处。选择最适合您的项目需求和规模的工具。