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

如果我错了，请纠正我，但你的 clear 函数实际上并没有清除一个东西，而是添加了。

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

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

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

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

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

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

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

如果您确实需要删除它，也可以完成，但遗憾的是不知道 values 是什么以及它是如何存储的，以我有限的知识，我无法预测要做什么以及如何.如果您想使用 values

更新您的帖子

这样做的目的是试图找出问题发生的原因和位置。

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

1 个答案: