React antd 4 Form in Modal resetFields showing wrong data - reactjs

Question

I am having trouble understanding why I am seeing this unexpected behavior. If I have some data that I am passing into a prop on an object that has a modal with a form done as shown below and I click on a button, then cancel, then click on a different button, the form is showing the previously clicked state each time. Within the useEffect code, I can see that the correct person is loaded, though the form initializes the previous person.
import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Button, Modal, Form, Input } from "antd";
const PersonEditForm = ({ person, onCreate, onCancel }) => {
const [form] = Form.useForm();
const prevRef = useRef();
useEffect(() => {
if (prevRef.current === null && person) {
form.resetFields();
}
prevRef.current = person;
});
return (
person && (
<Modal
visible={!!person}
title="Person Editor"
okText="Create"
cancelText="Cancel"
onCancel={onCancel}
onOk={() => {
form
.validateFields()
.then(values => {
onCreate(values);
})
.catch(info => {
console.log("Validate Failed:", info);
});
}}
>
<Form
form={form}
layout="vertical"
name="form_in_modal"
initialValues={person}
>
<Form.Item
name="name"
label="Name"
rules={[
{
required: true,
message: "Please input the person's name!"
}
]}
>
<Input />
</Form.Item>
</Form>
</Modal>
)
);
};
const CollectionsPage = () => {
const [person, setPerson] = useState(null);
const onCreate = values => {
console.log("Received values of form: ", values);
setPerson(null);
};
return (
<div>
<Button
type="primary"
onClick={() => {
setPerson({ name: "Bob" });
}}
>
Edit Bob
</Button>
<Button
type="primary"
onClick={() => {
setPerson({ name: "John" });
}}
>
Edit John
</Button>
<Button
type="primary"
onClick={() => {
setPerson({ name: "Phil" });
}}
>
Edit Phil
</Button>
<PersonEditForm
person={person}
onCreate={onCreate}
onCancel={() => {
setPerson(null);
}}
/>
</div>
);
};
ReactDOM.render(<CollectionsPage />, document.getElementById("container"));
However, if I remove the person && ( from my <PersonEditForm> component, it works as expected. Can anyone explain the subtle difference I'm running into here? I have down-stream complex form components that weren't handling a null state, so I wanted to only create the modal if a person was being edited.

Answer 1

The code doesn't work because of some funny race condition arising from misusing form.resetForm to change initialValues. You would probably have to go into the actual implementation of initialValues to figure out what is going wrong.
However, if instead of reseting the form inside of useEffect, you were to assign the clicked person value using form.setFieldsValue(person), your code would work as intended.
https://codesandbox.io/s/hungry-christian-cdn7t?file=/src/index.js