ReactJS：无法在现有状态转换期间更新（例如在“渲染”中）。渲染方法应该是 props 和 state 的纯函数

Question

你好，我是 ReactJS 的新手，我正在使用一个库 react-bootstrap4-form-validation to validate my form. From the documentation there are the function that use to reset the form validation. From the documentations there are example to reset the form validation using triggering button onClick, like this。对于一个条件，我需要重置验证，但不是在触发按钮 onClick 时，而是在父组件的道具发生变化时。由于这些需要我还创建了一个函数（useCompare）用于比较从父组件接收到的道具。

简而言之，我想重置我的表单，当从父组件接收到的 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 内）。渲染方法应该是 props 和 state

的纯函数

谁能帮我解决这个问题？事先万分感谢

Answer 1

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

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

您可能需要将 resetForm 包裹在 useCallback 钩子中。

每次 form 更改时，这个 useEffect 都会运行，将它放在这里应该可以防止 'update during render' 问题。

ReactJS：无法在现有状态转换期间更新（例如在“渲染”中）。渲染方法应该是 props 和 state 的纯函数

ReactJS: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state

javascript

reactjs

react-hooks

use-ref