React 最終形式重置為初始值

Question

我對反應最終形式有問題，它會在 3 秒后重置值並恢復為初始值……調試了 3 天，但沒有任何變化……這是代碼……任何想法和信息都會受到影響，謝謝

const ChoiceQuestionFrom = ({ editMode = true, onSubmit = () => {}}) => {
  const handleValidations = (values) => {
    let errors = {};
    if(!values.question){
        errors.question = "Question Required !"
    }
    return errors;
}
  return (
    <Form
      onSubmit={(values) => {
        return onSubmit(values);
      }}
      render={_ChoiceQuestionFrom}
      editMode={editMode}
      initialValues={{
        type: "question",
        qType: "pollMultiChoice",
        question: "",
        answers: [{ answer: "", isCorrect: false }],
      }}
      validate={handleValidations}
    />
  );
};

const _ChoiceQuestionFrom = (props) => {
  const {
    editMode,
    values,
    submitting,
    form: { change: onFormChange },
    handleSubmit,
  } = props;


  const handleListEdit = (e, ind) => {
    const { value: answer } = e.currentTarget;
    let currentAnswers = [...values.answers];
    currentAnswers[ind] = { ...currentAnswers[ind], answer };
    onFormChange("answers", currentAnswers);
  };

  const handleDeleteItem = (ind) => {
    let currentAnswers = [...values.answers];
    currentAnswers.splice(ind, 1);
    onFormChange("answers", currentAnswers);
  };

  const handleCheckboxChange = (ind) => {
    let currentAnswers = [...values.answers];
    currentAnswers[ind] = {
      ...currentAnswers[ind],
      isCorrect: !currentAnswers[ind].isCorrect,
    };
    onFormChange("answers", currentAnswers);
  };

  const handleQuestionStatementChange = (e) => {
    return onFormChange("question", e.target.value);
  };
  return (
    <form onSubmit={handleSubmit}>
      <QuestionStatement
        value={values.question}
        onChange={handleQuestionStatementChange}
        outerStyles={styles.questionStatement}
      />
      <JunoTypography variant="h2" style={{marginBottom: 10}}><FormattedMessage id="ChoiceQuestionForm.AddChoices" defaultMessage="Add Choices" /></JunoTypography>
      {values.answers.map((val, ind) => (
        <FieldCheckListItem
          key={ind} // change with id
          onDelete={() => handleDeleteItem(ind)}
          onTextChange={(e) => handleListEdit(e, ind)}
          onCheckboxChange={() => handleCheckboxChange(ind)}
          textFullWidth={true}
          textValue={val.answer}
          checked={val.isCorrect}
          disabled={editMode}
          outerStyle={styles.item}
        />
      ))}
      <div className="flex" style={styles.buttonsContainer}>
      <DesignedRoundDashedButton
        type="button"
        label={
          <FormattedMessage
            id="ChoiceQuestionForm.AddAnswer"
            defaultMessage="Add Answer"
          />
        }
        onClick={() => 
          onFormChange("answers", [
            ...values.answers,
            { answer: "", isCorrect: false },
          ])
        
      }
      />

      <FieldButton
        color="primary"
        variant="contained"
        submitting={submitting}
        type="submit"
        style={styles.saveBtn}
      >
        <FormattedMessage id="Question.Save" defaultMessage="Save" />
      </FieldButton>
      </div>
    </form>
  );
};

大家好，我的反應最終形式有問題，它會在 3 秒后重置值並恢復到初始值……調試了 3 天，但沒有任何變化……這是代碼……任何想法和信息都會受到影響， 謝謝

Answer 1

如果到目前為止還沒有解決，可以使用keepDirtyOnReinitialize來解決。 正如您在文檔中看到的那樣， https://final-form.org/docs/react-final-form/types/FormProps#keepdirtyonreinitialize它的目的是不覆蓋您迄今為止所做的更改。

但是，發生這種情況的事實可能表明您構建表單組件的方式存在其他問題......但這在您放置在此處的代碼中不可見。