reactjs - 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 天，但没有任何变化……这是代码……任何想法和信息都会受到影响， 谢谢

标签： reactjsreact-final-form

Answer 1

如果你到目前为止还没有解决它，你可以使用keepDirtyOnReinitializeprop 来解决它。正如您在文档中看到的那样，https://final-form.org/docs/react-final-form/types/FormProps#keepdirtyonreinitialize它的目的是不覆盖您迄今为止所做的更改。

但是，发生这种情况的事实可能表明您构建表单组件的方式存在其他问题......但这在您放置在此处的代码中不可见。