Issue

当然，clearFields处理程序会重置本地的name、description和element状态值，但由于表单字段不是104，因此它们实际上不会更新，直到您手动编辑输入.

PUT请求响应处理中还有一个小问题，即立即调用dispatch，而不是在request解析后调用.

Solution

你有两个简单的 Select :

完全受控输入

完全受控的输入使用REACT状态，并将value和102两个处理程序都传递给输入.换句话说，这个值是由国家控制的.

const HeroesAddForm = () => {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [element, setElement] = useState("");
  const { request } = useHttp();

  const dispatch = useDispatch();

  const clearFields = () => {
    setName("");
    setDescription("");
    setElement("");
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    const newHero = {
      id: uuidv4(),
      name,
      description,
      element
    };

    request("http://localhost:3001/heroes", "POST", JSON.stringify(newHero))
      .then(() => dispatch(heroCreate(newHero))) // <-- arrow function call dispatch
      .then(clearFields)
      .catch(console.log);
  };

  return (
    <form className="border p-4 shadow-lg rounded" onSubmit={handleSubmit}>
      <div className="mb-3">
        <label htmlFor="name" className="form-label fs-4">
          Name of new hero
        </label>
        <input
          required
          type="text"
          name="name"
          className="form-control"
          onChange={(event) => setName(event.target.value)}
          value={name} // <-- provide value
          placeholder="What is your name?"
        />
      </div>

      <div className="mb-3">
        <label htmlFor="text" className="form-label fs-4">
          Description
        </label>
        <textarea
          required
          name="description"
          className="form-control"
          placeholder="Tell us something about your hero"
          onChange={(event) => setDescription(event.target.value)}
          value={description} // <-- provide value
          style={{ height: "130px" }}
        />
      </div>

      <div className="mb-3">
        <label htmlFor="element" className="form-label">
          Choose hero element
        </label>
        <select
          required
          className="form-select"
          id="element"
          onChange={(event) => setElement(event.target.value)}
          value={element} // <-- provide value
          name="element"
        >
          <option disabled value="">
            I have the element of...
          </option>
          <option value="fire">Fire</option>
          <option value="water">Water</option>
          <option value="wind">Wind</option>
          <option value="earth">Earth</option>
        </select>
      </div>

      <button type="submit" className="btn btn-primary">
        Create
      </button>
    </form>
  );
};

完全不受控制的输入

完全不受控制的输入不使用REACT状态，并且不向输入传递value或onChange个处理程序.使用form元素的onSubmit处理程序访问表单字段值并重置表单.

const HeroesAddForm = () => {
  const { request } = useHttp();

  const dispatch = useDispatch();

  const handleSubmit = (event) => {
    event.preventDefault();

    const { description, element, name } = event.target;

    const newHero = {
      id: uuidv4(),
      name: name.value,
      description: description.value,
      element: element.value
    };

    request("http://localhost:3001/heroes", "POST", JSON.stringify(newHero))
      .then(() => dispatch(heroCreate(newHero)))
      .then(() => event.target.reset())
      .catch(console.log);
  };

  return (
    <form className="border p-4 shadow-lg rounded" onSubmit={handleSubmit}>
      <div className="mb-3">
        <label htmlFor="name" className="form-label fs-4">
          Name of new hero
        </label>
        <input
          required
          type="text"
          name="name"
          className="form-control"
          placeholder="What is your name?"
        />
      </div>

      <div className="mb-3">
        <label htmlFor="text" className="form-label fs-4">
          Description
        </label>
        <textarea
          required
          name="description"
          className="form-control"
          placeholder="Tell us something about your hero"
          style={{ height: "130px" }}
        />
      </div>

      <div className="mb-3">
        <label htmlFor="element" className="form-label">
          Choose hero element
        </label>
        <select
          required
          className="form-select"
          id="element"
          defaultValue="" // <-- default value
          name="element"
        >
          <option disabled value="">
            I have the element of...
          </option>
          <option value="fire">Fire</option>
          <option value="water">Water</option>
          <option value="wind">Wind</option>
          <option value="earth">Earth</option>
        </select>
      </div>

      <button type="submit" className="btn btn-primary">
        Create
      </button>
    </form>
  );
};