reactjs - 当我删除输入时，所有其他输入数据都会变得清晰

Question

嗨，我正在开发一个有四个输入的 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.rule_0,
    rule_1: teamData.rule_1,
    rule_2: teamData.rule_2,
    rule_3: teamData.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 handleRemoveClick = (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

    console.log(updateTeamData);

    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]);

  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={() => {
                    handleRemoveClick(idx);
                    clearInput(`rule_${idx}`);
                  }}
                >
                  <Remove />
                </button>
                <input
                  type="text"
                  placeholder={`Rule ${idx + 1}`}
                  defaultValue={teamData.rules[idx]}
                  name={`rule_${idx}`}
                  onChange={handleChange}
                />
              </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;

标签： reactjsnext.js