React 最终形式重置为初始值

Question

I have problem with react final form, it resets values after 3seconds and takes back to initial values... 3 days took to debug but nothing changes... here is the code... any idea and information will be affricated, thanks

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

Hello guys, I have problem with react final form, it resets values after 3seconds and takes back to initial values... 3 days took to debug but nothing changes... here is the code... any idea and information will be affricated, thanks

Answer 1

If you haven't solved it so far, you can do it by using keepDirtyOnReinitialize prop. As you can see in the docs, https://final-form.org/docs/react-final-form/types/FormProps#keepdirtyonreinitialize it serves the purpose of not overwriting the changes you have done so far.

But, the fact that this is happening could indicate that there is something else wrong with the way you structured your form components... But that is not visible from the code you placed here.