我怎样才能使这个表单处理程序 clearer/better？

Question

首先我想说我是一个初学者，正在编写我的第一个 Next.js 应用程序，尽管我觉得这个问题与 React 更相关。我正在构建一个用户可以 add/edit 存储食物、食谱等的应用程序，这意味着我使用了很多提交表单处理程序。在每个处理程序中我：

检查输入是否正确（我也是直接在form里做的）
管理数据
获取到后端 (Firebase)
向 Redux 发送一个动作

问题是我觉得这些处理程序太复杂太“丑陋”。有人可以帮助我在这里做得更好吗？我正在考虑将一些功能导出到自定义挂钩或创建一些动态函数，但我不知道如何在此处执行此操作，因为 adding/editing/removing 食物之间的所有这些处理程序都非常不同（它们管理数据的方式大不相同）。

下面是编辑食物的表单处理程序示例（最“丑”的）

const submitEditFoodHandler = async (e) => {
try {
  e.preventDefault();
  if (
    editFoodName.current.value.trim().length < 1 ||
    editFoodType.current.value === "DEFAULT" ||
    +editFoodQuantity.current.value < 0 ||
    editFoodQuantity.current.value.trim().length < 1
  ) {
    alert(ALERT_FOOD_EMPTY);
    return;
  } else if (!editFoodWeight.current.value.match(WEIGHT_REGEX)) {
    alert(ALERT_WEIGHT_FORMAT);
    return;
  }
  const foodObj = {
    username: foundUser.username,
    id: props.row.id,
    foodId: foundUser.foodId,
    name: editFoodName.current.value,
    type: editFoodType.current.value,
    quantity: editFoodQuantity.current.value,
    weight: editFoodWeight.current.value,
    expDate: editFoodExpDate.current.value,
    key: props.row.key,
  };

  const foodCopy = [...foundUser.food];
  const foundUserFoodIndex = foodCopy.findIndex(
    (ele) => +ele.id === +props.row.id
  );

  foodCopy[foundUserFoodIndex] = {
    name: editFoodName.current.value,
    type: editFoodType.current.value,
    quantity: editFoodQuantity.current.value,
    weight: editFoodWeight.current.value,
    expDate: editFoodExpDate.current.value,
    id: props.row.id,
    key: props.row.key,
  };

  const payload = {
    username: foundUser.username,
    recipesId: foundUser.recipesId,
    foodId: foundUser.foodId,
    totalWeight:
      foundUser.totalWeight -
      getNumberFromStr(props.row.weight) +
      getNumberFromStr(editFoodWeight.current.value),
    totalQuantity:
      foundUser.totalQuantity -
      props.row.quantity +
      +editFoodQuantity.current.value,
    food: foodCopy,
    recipes: foundUser.recipes,
  };

  const docRef = doc(db, "users", foundUser.id);
  await setDoc(docRef, payload);
  dispatch(fridgeActions.editFood(foodObj));

  editFoodName.current.value = "";
  editFoodType.current.value = "";
  editFoodQuantity.current.value = "";
  editFoodWeight.current.value = "";
  editFoodExpDate.current.value = "";
  props.setShowEditFoodModal(false);
} catch (err) {
  alert(ALERT_OTHER);
  console.error(err);
}};

提前感谢您的任何建议

Answer 1

你的问题更多是关于架构的，在这种情况下，如果你有很多领域，事情最终会变得更大，基于你said/showed有几件事我可以看到你可以做提高代码质量

干，搜索你做事超过 1 次的地方，并尝试抽象它们
如果你想让你的应用程序扩展，我真的建议你根据你的需要找到一个表单库；看看：
- formik
- React Hook Form
尝试拆分职责，您可以将复杂的表单拆分为其他组件，例如一个用于处理与网络相关的内容，另一个仅用于逻辑，一个用于呈现表单本身，错误反馈等

我怎样才能使这个表单处理程序 clearer/better？

How can I make this form handler clearer/better?

javascript

reactjs

redux

next.js

react-hooks