Reactjs 动态添加或删除文本输入字段并将值设置为 React JS 中主要状态的数组

我正在试图弄清楚如何提交任意数量的数组元素，因此至少有一个元素是无穷大的.

这是一种只需单击提交按钮即可传递的状态:

const [gallery, setGallery] = useState({
    title: "",
    description: "",
    image_url: [],
  });

我正在循环执行以下状态...

const [linkInput, setLinkInput] = useState([{ id: 1, link: "" }]);

...就像这样:

<div className="form-group mx-sm-3 mb-2">
          <label htmlFor="image_url">Image URLs*</label>
          {Array.isArray(linkInput) &&
            linkInput.map((input, i) => (
              <div className="input-group mb-3" key={input.id}>
                <input
                  className="form-control"
                  id="image_url"
                  type="text"
                  value={input.link}
                  required
                  onChange={(e) =>
                    onChangeLink({ ...input, link: e.target.value })
                  }
                />
                <br />
                <div style={{ color: "#ffffff" }}>__</div>
                {linkInput.length !== 1 && (
                  <>
                    <button
                      type="button"
                      className="btn btn-primary"
                      onClick={() => removeLink(input.id)}
                    >
                      Remove Image
                    </button>
                  </>
                )}
              </div>
            ))}
          <br />
          <button
            type="button"
            className="btn btn-primary"
            onClick={() => addInput()}
          >
            Add another image
          </button>
        </div>

这些是我用来通过修改"linkInput"状态来添加或删除输入字段的函数:

const handleRemoveLink = (id) => {
    setLinkInput(linkInput.filter((el) => el.id !== id));
};

  const handleAddInputField = () => {
    const lastItem = linkInput[linkInput.length - 1];
    setLinkInput([...linkInput, { id: Number(lastItem.id + 1), link: "" }]);
  };

我正try 从每个输入元素中获取"link"值，并在单击表单上的提交按钮后将其放入"Image_url:[]"中.目前我甚至没有接近，形式是这样的:它完全消失时，即使放置一个单一的字符.我该怎么办？