Cannot update during an existing state transition (such as within `render`). Render methods should b

背景

在使用antd 4.x的时候 函数组件更新props 中传来的 input 初始值的时候出现,

原代码

const Item=Form.Item;
const UpdateForm=(props)=>{

    const [form] = Form.useForm();
    form.setFieldsValue({'title':props.title});
    const changeHandle=(e)=>{
        const title=e.target.value;
        props.change(title);
    }
    return (    
        <Form form={form} initialValues=''>
            <Item name='title' rules={
                [{
                    required:true,
                    message:'内容不能为空'
                }]
            }>
                <Input  onChange={e=>changeHandle(e)}/>
            </Item>
        </Form>
    )
}

修改后

const Item=Form.Item;
const UpdateForm=(props)=>{

    const [form] = Form.useForm();
    const changeHandle=(e)=>{
        const title=e.target.value;
        props.change(title);
    }
    useEffect(() => {
        form.setFieldsValue({'title':props.title});
    }, [props.title])
    return (    
        <Form form={form} initialValues=''>
            <Item name='title' rules={
                [{
                    required:true,
                    message:'内容不能为空'
                }]
            }>
                <Input  onChange={e=>changeHandle(e)}/>
            </Item>
        </Form>
    )
}

结论

不能在函数组件中直接更新state，（应该时不能在初始化组件的时候更新状态） ,需要放在操作函数中，自己写的change函数或者类似声明周期钩子useEffect中。