我刚开始使用新的react router dom表单和动作。有静态输入的范式工作正常吗？我想知道如何使输入字段动态化。例如，对于一个特定的领域，如何进行多项输入，我想从用户那里获得兴趣。现在用户可以有多个兴趣，所以他应该有一个选项来添加另一个兴趣领域。基本上，这就是我想从用户那里得到的：

data={
  name:'name goes here',
  password:'password',
  interest:["interest one","interest two", "interest three"]
}

现在主要的事情是想做它使用的形式和行动的react-router-dom和FormData API。以下是我到目前为止的实现：

import { Form } from "react-router-dom";
import { useState } from "react";

export const action = async ({ request }) => {
  const formData = await request.formData();
  console.log(formData);
  const data = Object.fromEntries(formData);
  console.log(data);
  return data;
};

export default function Home() {
  const [interests, setInterests] = useState([{ val: "" }]);

  const handleFormChange = (event, index) => {
    let data = [...interests];
    data[index][event.target.name] = event.target.value;
    setInterests(data);
  };

  const addFields = () => {
    let object = {
      name: "",
      age: ""
    };

    setInterests([...interests, object]);
  };
  const removeFields = (index) => {
    let data = [...interests];
    data.splice(index, 1);
    setInterests(data);
  };
  return (
    <div>
      <Form method="post" className="form">
        <input type="text" name="username" placeholder="username" />
        <input type="password" name="password" placeholder="password" />
        {interests.map((item, index) => (
          <div key={index}>
            <input
              type="text"
              name="val"
              placeholder="interests"
              onChange={(event) => handleFormChange(event, index)}
              value={item.val}
            />

            <button onClick={() => removeFields(index)}>Remove</button>
          </div>
        ))}
        <button type="button" onClick={addFields}>
          Add More..
        </button>

        <button type="submit"> Submit</button>
      </Form>
    </div>
  );
}

但是当我控制数据时，我只得到了名称、密码和一个感兴趣的值。此外，如果我添加另一个字段并开始在该字段中写入，它会显示此警告：A component is changing an uncontrolled input to be controlled.这里是代码沙箱链接也https://codesandbox.io/s/naughty-chebyshev-yyznl3?file=/src/Home.jsx:0-1563