在每个更改上更新Redux Store上的表单值

Question

我目前正在尝试每次更改时在商店中存储一些表单输入值。但是，在每个新调度上，字符串仅考虑最后一个1个字符。

假设我写你好！在我的输入上。在商店中，它可以保存您好，

这是我的大部分代码，以防您要检查它！

这是处理输入更改的自定义钩子：

import { useState } from "react";

export const useForm = (initialState = {}) => {
  const [values, setValues] = useState(initialState);

  const reset = () => {
    setValues(initialState);
  };

  const handleInputChange = ({ target }) => {
    setValues({
      ...values,
      [target.name]: target.value,
    });
  };

  return [values, handleInputChange, reset];
};

这是我的形式组件：

import React from "react";
import { useDispatch } from "react-redux";
import { NFTFormUpdate } from "../../../actions/NFT";
import { useForm } from "../../../hooks/useForm";

export const NFTMintingForm = () => {
  const dispatch = useDispatch();

  const [
    { toAddress, name, landOwnerAlias, size, country, stateOrRegion, city },
    handleInputChange,
    reset,
  ] = useForm({
    toAddress: "",
    name: "",
    landOwnerAlias: "",
    size: 0,
    country: "",
    stateOrRegion: "",
    city: "",
  });

  const handleInputUpdate = (ref) => {
    handleInputChange(ref);

    dispatch(
      NFTFormUpdate({
        toAddress,
        name,
        landOwnerAlias,
        size,
        country,
        stateOrRegion,
        city,
      })
    );
    
  };

  return (
    <div>
      <h2 className="text-center">Land NFT minting</h2>
      <form className="container">
        <div className="form-floating">
          <input
            id="toAddress"
            type="text"
            name="toAddress"
            className="form-control"
            placeholder="0x1234..."
            autoComplete="off"
            value={toAddress}
            onChange={handleInputUpdate}
          />
          <label htmlFor="toAddress">Land Owner Address</label>
        </div>
        <br />
        <div className="form-floating">
          <input
            id="name"
            type="text"
            name="name"
            className="form-control"
            placeholder="0x1234..."
            autoComplete="off"
            value={name}
            onChange={handleInputUpdate}
          />
          <label htmlFor="name">Land Name</label>
        </div>
        <br />
        <div className="form-floating">
          <input
            id="landOwnerAlias"
            type="text"
            name="landOwnerAlias"
            className="form-control"
            placeholder="Netflix"
            autoComplete="off"
            value={landOwnerAlias}
            onChange={handleInputUpdate}
          />
          <label htmlFor="landOwnerAlias">Land Owner Alias</label>
        </div>
        <br />
        <div className="form-floating">
          <input
            id="size"
            type="number"
            name="size"
            className="form-control"
            placeholder="0x1234..."
            autoComplete="off"
            value={size}
            onChange={handleInputUpdate}
            min={0}
            step={0.0001}
          />
          <label htmlFor="size">Land Size (m2)</label>
        </div>
        <br />
        <div className="form-floating">
          <input
            id="country"
            type="text"
            name="country"
            className="form-control"
            placeholder="0x1234..."
            autoComplete="off"
            value={country}
            onChange={handleInputUpdate}
          />
          <label htmlFor="country">Country</label>
        </div>
        <br />
        <div className="form-floating">
          <input
            id="stateOrRegion"
            type="text"
            name="stateOrRegion"
            className="form-control"
            placeholder="0x1234..."
            autoComplete="off"
            value={stateOrRegion}
            onChange={handleInputUpdate}
          />
          <label htmlFor="stateOrRegion">State or Region</label>
        </div>
        <br />
        <div className="form-floating">
          <input
            id="city"
            type="text"
            name="city"
            className="form-control"
            placeholder="0x1234..."
            autoComplete="off"
            value={city}
            onChange={handleInputUpdate}
          />
          <label htmlFor="city">City</label>
        </div>
        <br />
      </form>
      <br />
    </div>
  );
};

这是其当前行为的证明：

如您所见，该动作被正确触发了6次，但它只能在商店中保存数据，直到Hello Hello

任何帮助将不胜感激！