React组件每次输入变更即提交表单至后端，需改为仅点击提交时触发

问题根源 #

1. 组件重渲染时自动触发请求：你在NewFood组件的函数体里直接调用了postFood(foodName, foodType, foodDescription)，每次输入框内容变化会更新state，导致组件重新渲染，这段代码就会重复执行，所以每次修改输入都会发送请求。
2. 按钮绑定方式错误：提交按钮的onClick={postFood}会把点击事件对象作为参数传给postFood，而不是当前的state值，同时表单默认的提交行为会引发页面刷新，也需要阻止。

修复方案 #

1. 删除组件函数体中直接调用的postFood语句；
2. 编写一个提交处理函数，在函数里获取当前state值并调用postFood，同时阻止表单默认提交行为；
3. 把处理函数绑定到表单的onSubmit事件（比绑定按钮onClick更符合表单规范）。

修改后的完整代码 #

import React, { useState } from "react";
import postFood from "./Services/createFood";

function NewFood({ closeFoodForm }) {
  const [foodName, setfoodName] = useState("");
  const [foodType, setfoodType] = useState("Hamburger");
  const [foodDescription, setfoodDescription] = useState("");

  // 提交处理函数
  const handleSubmit = (e) => {
    // 阻止表单默认提交行为（避免页面刷新）
    e.preventDefault();
    // 调用postFood发送请求，传入当前state的值
    postFood(foodName, foodType, foodDescription);
    // 可选：提交后清空输入框，提升用户体验
    setfoodName("");
    setfoodDescription("");
  };

  return (
    <div className="CreateNewFood">
      {/* 绑定表单的onSubmit事件到处理函数 */}
      <form id="foodForm" onSubmit={handleSubmit}>
        <label>Name</label>
        <input
          onChange={(e) => {
            setfoodName(e.target.value);
          }}
          id="inputFoodName"
          name="foodName"
          value={foodName} {/* 绑定value，将输入框设为受控组件 */}
        ></input>

        <select
          id="inputFoodType"
          name="foodType"
          onChange={(e) => setfoodType(e.target.value)}
          value={foodType} {/* 绑定value，将下拉框设为受控组件 */}
        >
          <option value="hamburger">Hamburger</option>
          <option value="pizza">Pizza</option>
          <option value="kebab">Kebab</option>
        </select>

        <label>Description</label>
        <textarea
          onChange={(e) => {
            setfoodDescription(e.target.value);
          }}
          id="inputFoodDescription"
          placeholder="big hamburger with double patties "
          name="foodDescription"
          value={foodDescription} {/* 绑定value，将文本域设为受控组件 */}
        ></textarea>

        {/* 按钮type改为submit，无需额外绑定onClick */}
        <button type="submit" id="submitButton">
          Create
        </button>
      </form>
    </div>
  );
}

额外优化说明 #

• 给所有输入控件加上value绑定，将它们变成受控组件，确保输入框的值和state完全同步，这是React表单的最佳实践；
• 使用表单的onSubmit事件处理提交，符合HTML表单原生逻辑，用户按回车键也能触发提交，比单独绑定按钮onClick更可靠。

内容的提问来源于stack exchange，提问作者thugcat85