javascript - ReactJS:无法在现有状态转换期间更新(例如在 `render` 内)。渲染方法应该是 props 和 state 的纯函数

Question

你好我是 ReactJS 的新手，我正在使用一个库 react-bootstrap4-form-validation 来验证我的表单。从文档中可以找到用于重置表单验证的函数。文档中有使用触发按钮 onClick 重置表单验证的示例，例如 this .对于一个条件，我需要重置验证，但不是在触发按钮 onClick 时，而是在父组件的 props 发生变化时。由于这些需要，我还创建了一个函数 (useCompare)，用于比较从父组件接收到的 props。

简而言之，当从父组件接收到的 props 发生变化时，我想重置我的表单，代码如下所示。

import React, { useRef } from "react";
import { ValidationForm, TextInput } from 'react-bootstrap4-form-validation';
import { useCompare } from '../../services/compare-props';

function TestForm({ form }) {
  const formRefs = useRef();
  

    const handleSubmit = (e, formData, inputs) => {
        e.preventDefault();
        console.log(formData)
    }

    if ( !useCompare(form) ) {
        resetForm()
    }


  function resetForm() {
    let formRef = formRefs.current;
    formRef != null ? formRef.resetValidationState(true) : null;
  }

    return (
        <div className="row justify-content-center">
            <div className="col-md-6 col-sm-10">
                <div className="shadow-sm p-3 mb-5 bg-white rounded border">
                    <h6>{form.labelForm}</h6>
                    <hr />
                    <ValidationForm  onSubmit={handleSubmit} id="form-test" ref={formRefs}>
                        {form.field.map(function (fields, index) {
                            return (
                                <div className="row form-group mb-1" key={index}>
                                    <div className="col-lg-4 col-sm-4 col-md-4">{fields.label}</div>
                                    <div className="col-lg-8 col-sm-8 col-md-8">
                                        <TextInput
                                            type={fields.type}
                                            className="form-control"
                                            name={fields.name}
                                            autoComplete="off"
                                            required
                                            {...(form.formType == 'add' && fields.name == 'brand_code' ? {minLength : "4"} : {})}
                                        />
                                    </div>
                                </div>
                            );
                        })}
                        <button type="submit" className="btn btn-danger">
                            Save
                        </button>
                        <button type="button" className="btn btn-warning" onClick={() => resetForm()}>
                            Reset Form
                        </button>
                    </ValidationForm>
                </div>
            </div>
        </div>
    );
}

export default TestForm;

当从父组件接收到的 props 没有改变时，上面的代码工作正常，当我尝试通过 onClick 触发按钮重置表单时，它也工作正常。但是当我想在父组件的 props 发生变化时重置表单时，它会产生这样的错误:

警告:无法在现有状态转换期间更新(例如在 render 中)。渲染方法应该是 Prop 和状态的纯函数

谁能帮我解决这个问题？非常感谢。

Answer 1

尝试将 useCompare 检查移至副作用:

useEffect( () => {
    if ( !useCompare(form) ) {
        resetForm()
    }
}, [useCompare, form, resetForm] )

您可能必须将 resetForm 包装在 useCallback Hook 中。

useEffect 将在每次 form 更改时运行，将它放在这里应该可以防止“渲染期间更新”问题。