Reactjs 当我点击handleSubmit时，所有其他输入数据都被清除

您好，我正在使用React应用程序，其中有四个选项。当用户选择一个选项时，相应的输入元素将添加到包装器中。在以下代码中，添加操作工作正常，但删除操作工作不正常，它没有删除相应的元素。另一个问题是，组件重新渲染时，输入字段上的值不存在。因此，专家指导我如何在单击“删除”按钮时删除相应的行，并且在组件重新渲染时不应重置输入值

但是，当我提交输入时，它会完美地显示我的数据，当我重新启动页面，点击编辑并用默认值点击提交时，它只需清除所有数据并用

未定义的
值发送回我的后端，如下所示：
[未定义，未定义，未定义，未定义]

以下是我的全部内容：

const Agreement = (props) => {
  const { agreement, editable, teamData, teamId, fetchTeamData } = props;
  const [editing, setEditing] = useState(false);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [showErrors, setShowErrors] = useState(false);
  const [errorsArr, setErrorsArr] = useState();

  const initialFormState = {
    rule_0: teamData.rules.rule_0,
    rule_1: teamData.rules.rule_1,
    rule_2: teamData.rules.rule_2,
    rule_3: teamData.rules.rule_3,
    creator: teamData.User.public_user_id,
  };

  const [updateTeamData, setUpdateTeamData] = useState(initialFormState);

  const [inputs, setInputs] = useState(teamData.rules);

  const handleChange = (event) => {
    const { name, value } = event.target;
    // Update state
    setUpdateTeamData((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  // Add more input
  const addInputs = () => {
    setInputs([...inputs, { name: `rule_${inputs.length + 1}` }]);
  };

  // handle click event of the Remove button
  const removeInputs = (index) => {
    const list = [...inputs];
    list.splice(index, 1);
    setInputs(list);
  };

  const clearInput = (dataName) => {
    setUpdateTeamData((prevState) => {
      delete prevState[dataName];
      return {
        ...prevState,
      };
    });
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    setEditing(false);
    // Send update request

    const res = await axios.put(`/api/v1/teams/team/${teamId}`, updateTeamData);

    // If no validation errors were found
    // Validation errors don't throw errors, it returns an array to display.
    if (res.data.validationErrors === undefined) {
      // Clear any errors
      setErrorsArr([]);
      // Hide the errors component
      setShowErrors(false);
      // Call update profiles on parent
      fetchTeamData();
    } else {
      // Set errors
      setErrorsArr(res.data.validationErrors.errors);
      // Show the errors component
      setShowErrors(true);
    }
  };

  const handleCancel = () => {
    setEditing(false);
  };

  useEffect(() => {
    if (agreement === "default") {
      setTitle(defaultTitle);
      setInputs(teamData.rules);
    } else {
      setTitle(agreement.title ?? "");
    }
  }, [agreement, teamData]);

  console.log("teamData.rules", teamData.rules);
  console.log("inputs", inputs);

  return (
    <div className="team-agreement-container">
      {!editing && (
        <>
          <h4 className="team-agreement-rules-title">{title}</h4>
          {editable && (
            <div className="team-agreement-rules">
              <EditOutlined
                className="team-agreement-rules-edit-icon"
                onClick={() => setEditing(true)}
              />
            </div>
          )}
          <p className="team-agreement-rules-description">{description}</p>
          {teamData.rules.map((rule, index) => (
            <div className="team-agreement-rule-item" key={`rule-${index}`}>
              {rule ? (
                <div>
                  <h4 className="team-agreement-rule-item-title">
                    {`Rule #${index + 1}`}
                  </h4>
                  <p className="team-agreement-rule-item-description">
                    - {rule}
                  </p>
                </div>
              ) : (
                ""
              )}
            </div>
          ))}
        </>
      )}
      {/* Edit rules form */}
      {editing && (
        <div className="team-agreement-form">
          {showErrors && <ModalErrorHandler errorsArr={errorsArr} />}
          <h1>Rules</h1>
          {inputs.map((data, idx) => {
            return (
              <div className="agreement-form-grid" key={`${data}-${idx}`}>
                <button
                  type="button"
                  className="agreement-remove-button"
                  onClick={() => {
                    removeInputs(idx);
                    clearInput(`rule_${idx}`);
                  }}
                >
                  <Remove />
                </button>
                <input
                  name={`rule_${idx}`}
                  onChange={handleChange}
                  value={teamData.rules[idx]}
                />
              </div>
            );
          })}
          {inputs.length < 4 && (
            <div className="team-agreement-add-rule">
              <button type="submit" onClick={addInputs}>
                <Add />
              </button>
            </div>
          )}
          <div className="div-button">
            <button className="save-button" onClick={handleSubmit}>
              Save
            </button>
            <button className="cancel-button" onClick={handleCancel}>
              Cancel
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default Agreement;

const协议=（道具）=>{
const{agreement，可编辑，teamData，teamId，fetchTeamData}=props；
const[editing，setEditing]=使用状态（false）；
const[title，setTitle]=useState（“”）；
const[description，setDescription]=useState（“”）；
常量[错误，设置显示错误]=使用状态（错误）；
const[errorsArr，setErrorsArr]=useState（）；
常量initialFormState={
规则0:teamData.rules.rule\u 0，
规则_1:teamData.rules.rule_1，
规则_2:teamData.rules.rule_2，
规则_3:teamData.rules.rule_3，
创建者：teamData.User.public\u用户\u id，
};
const[updateTeamData，setUpdateTeamData]=useState（initialFormState）；
const[inputs，setInputs]=useState（teamData.rules）；
常量handleChange=（事件）=>{
常量{name，value}=event.target；
//更新状态
setUpdateTeamData（（prevState）=>({
…国家，
[名称]：值，
}));
};
//添加更多输入
常量addInputs=（）=>{
setInputs（[…inputs，{name:`rule_${inputs.length+1}`}]）；
};
//处理删除按钮的单击事件
常量删除输入=（索引）=>{
常量列表=[…输入]；
拼接列表（索引，1）；
设置输入（列表）；
};
常量clearInput=（数据名）=>{
setUpdateTeamData（（prevState）=>{
删除prevState[dataName]；
返回{
…国家，
};
});
};
const handleSubmit=async（事件）=>{
event.preventDefault（）；
设置编辑（假）；
//发送更新请求
const res=await axios.put（`/api/v1/teams/teams/${teamId}`，updatetamdata）；
//如果没有发现验证错误
//验证错误不会抛出错误，它会返回一个要显示的数组。
if（res.data.validationErrors==未定义）{
//清除任何错误
setErrorsArr（[]）；
//隐藏错误组件
设置显示错误（错误）；
//在父级上调用更新配置文件
fetchTeamData（）；
}否则{
//设置错误
setErrorsArr（res.data.validationErrors.errors）；
//显示错误组件
设置显示错误（真）；
}
};
常量handleCancel=（）=>{
设置编辑（假）；
};
useffect（（）=>{
如果（协议==“默认”）{
设置标题（默认标题）；
设置输入（teamData.rules）；
}否则{
setTitle（agreement.title？？）；
}
}，[协议，团队数据]；
日志（“teamData.rules”，teamData.rules）；
控制台日志（“输入”，输入）；
返回(
{！编辑&&(
{title}
{可编辑&&(
设置编辑（真）}
/>
)}
{description}
{teamData.rules.map（（规则，索引）=>(
{规则(
{`Rule}${index+1}`}

-{规则}

) : (
""
)}
))}
)}
{/*编辑规则表单*/}
{编辑&&(
{showErrors&&}
规则
{inputs.map（（数据，idx）=>{
返回(
{
清除输入（idx）；
clearInput（`rule_${idx}`）；
}}
>
);
})}
{inputs.length<4&&(
)}
拯救
取消
)}
);
};
出口违约协议；

如何修复此错误

我认为问题在于
[输入，设置输入]
试试这个

<input
  //..
  onChange={(event) => handleChange(event.target.value)}
  //..
/>

})
 它不起作用了。数据未发送到后端是否仍有修复此错误的方法？
const handleChange = (event) => {
const { name, value } = event;
//....