Formik setValues() 抛出“重新渲染过多”错误

Question

我正在尝试使用setValues 在函数clearCurrentEntries 中仅清除Formik 表单中的一些键，但无论我做什么，我都会收到错误Too many re-renders. React limits the number of renders to prevent an infinite loop. 我也尝试调用clearCurrentEntries在showInput 函数中，但无论我把它放在哪里，我都会得到相同的重新渲染超出错误。

• 如何清除 Formik 状态下的某些值，但防止应用重新渲染次数过多而引发此错误？

const Container = () => {
  const emptyObj = {
    first_name: '',
    last_name: '',
    middle_name: '',
  }

  const clearCurrentEntries = (values, setValues) => {
    setValues({ ...values, ...emptyObj })
  }
  const showInput = (values) => {
    const msOptions = ['one', 'two', '']
    const ms = values?.status?.toLowerCase()
    const show = msOptions.every((option) => ms !== option)
    return show
  }

  return 
    <div>
      <Formik
        enabledReinitialize={true}
        initialValues={formStructure}
        onSubmit={handleSubmit}>
        {({ handleChange, handleSubmit, values, setFieldValue, setValues }) => {
          return (
            <Form onSubmit={handleSubmit} >
              <div className="form-content">
                <Form.Group>
                  <Form.Label>Status</Form.Label>
                  <Form.Control
                    as="select"
                    id={'status'}
                    name={'status'}
                    value={values?.status}
                    onChange={handleChange}>
                    <option value="">Select...</option>
                    {statusOptions.map((option) => (
                      <option key={option} value={option}>
                        {option}
                      </option>
                    ))}
                  </Form.Control>
                </Form.Group>
                {showInput(values) ? (
                  <CurrentInputs />
                ) : (
                  clearCurrentEntries(values, setValues)
                )}
            </Form>
          )
        }}
      </Formik>
    </div>
  )
}

export default Container

Answer 1

如果我错了，请纠正我，但你的清除功能实际上清除了一个东西，而是添加了。

const clearCurrentEntries = (values, setValues) => {
  setValues({ ...values, ...emptyObj })
}

你是 passint values - 你的对象中存在的所有值。还有一个方法setValues 设置整个对象的值。

在接收所有内容的函数中，您正在执行setValues 函数并传入对象内所有当前可用的数据，并将其与emptyObj 对象数据相结合。

在这一切之后，它会更新您的状态，从而重新渲染组件。但由于新值是相同的旧值 + 只是 emptyObj 对象，因此它不会删除不需要的值，因此它会触发执行完全相同逻辑的相同函数。

通过知道函数作为values 得到什么，可以更容易地找出问题所在。但是，如果我的理论是正确的，只需用 showInput 评论该区域就应该停止抛出这个错误。如果是这样 - 我是对的。

在这种情况下，可以通过简单的修复来完成一个简单的修复，而不是删除它，只是不要渲染它。

{showInput(values) && <CurrentInputs />}

如果您确实需要将其删除，那也可以完成，但遗憾的是不知道 values 是什么以及它是如何存储的，由于我的知识有限，我无法预测该做什么以及如何做。如果你想用values更新你的帖子

这样做的目的是尝试确定问题出现的原因和位置。