我想将值重置为初始值 formik

Question

我从后端获得了一些价值，我是字符串状态，使用 throw formik 我的任务是什么onClick 然后它设置为初始值，我创建一个状态并在 onClick 中更新它，但是如果我在控制台中检查，我会得到初始值，但在 UI 中什么也没有发生，请参阅图片以供参考

const [formValue, setFormValue] = useState(null);
  useEffect(() => {
    fetchSearchRule(rules);
  }, []);
  let initialValues = {
    exactNameMatch: rules.exactNameMatch,
    partialNameMatch: rules.partialNameMatch,
    partialNameMatchThreshold: rules.partialNameMatchThreshold,
    exactDOBMatch: rules.exactDOBMatch,
    partialDOBMatch: rules.partialDOBMatch,
    partialDOBMatchThreshold: rules.partialDOBMatchThreshold,
    countryMatch: rules.countryMatch,
    zipCodeMatch: rules.zipCodeMatch,
    completeAddressMatch: rules.completeAddressMatch,
    partialAddressMatchThreshold: 50,
    allSanctionsList:checked,
    FormChangeCount: 0,
  };

  const ruleForm = useFormik({
    initialValues,
    enableReinitialize: true,
    onSubmit: (values) => {
      updateSearchRules(values);
      setChangeRuleSettings(false);
      ruleForm.values.FormChangeCount = 0;
    },
  });

                <Box>
                  <Typography
                    onClick={() => {setFormValue(initialValues)
                      setChangeRuleSettings(false);
                    }}
                    color="secondary"
                    variant="subtitle2"
                    style={{ cursor: "pointer" }}
                  >
                    Reset Rule
                  </Typography>
                </Box>

Answer 1

我觉得有点难以理解你在问什么，但我会尽力回答。如果你只想在用户点击文本Reset Rule时重置整个表单，那么使用Formik的函数resetForm：

<Box>
    <Typography
        onClick={ruleForm.resetForm}
        color="secondary"
        variant="subtitle2"
        style={{ cursor: "pointer" }}
    >
    Reset Rule
    </Typography>
</Box>
        

如果您想重置表单中的某些值但不是全部，请将这些输入名称传递给resetForm()：

onClick={()=>{
  ruleForm.resetForm({
    values: {
      partialDOBMatchThreshold: rules.partialDOBMatchThreshold
    }
  })
}}

另外，从状态中删除formValue，不需要它。