React函数组件父状态更改不会重新呈现子组件

Question

我有一个父反应功能组件(Products)，它显示产品列表，并带有一个状态productInfo，它作为道具传递给子组件(AddEditProductModal)

const Products = () => {

const [isEditModalVisible, setIsEditModalVisible] = useState(false);
const [productInfo, setProductInfo] = useState({});
const showEditModal = async (currentProductInfo) => {
console.log('edit called for key ',currentProductInfo.key)
setIsEditModalVisible(true);
setProductInfo(prevProductInfo => {
return {...prevProductInfo, ...currentProductInfo};
});
};

useEffect(() => {
setIsEditModalVisible(false);
setProductInfo({})
}, []);

return (
<>
<AddEditProductModal
title="Edit Product"
visible={isEditModalVisible}
productInfo={productInfo}
onOk={handleOk}
onCancel={handleCancel}
onFinish={onFinish}
/>

//Table components with columns/actions per row go here


</>
);
};
export default Products;

子组件AddEditProductModal是一个antd Modal/Popup，它用为当前产品行选择的预填充值填充表单，如下所示。

const AddEditProductModal = ({ title, visible, productInfo, onOk, onCancel, onFinish }) => {
return (
<Modal
title={title}
visible={visible}
onOk={onOk}
onCancel={onCancel}
>
<Form
name="basic"
labelCol={{
span: 8,
}}
wrapperCol={{
span: 16,
}}
onFinish={onFinish}
initialValues = {productInfo}
>
<Form.Item
label="Key"
name="key"
>
<Input disabled={true} />
</Form.Item>
<Form.Item
label="Image"
name="image"
rules={[
{
required: true,
message: "Please input image!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Name"
name="name"
rules={[
{
required: true,
message: "Please input name!",
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Price"
name="price"
rules={[
{
required: true,
message: "Please input price!",
},
]}
>
<Input  />
</Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form>
</Modal>
);
};
export default AddEditProductModal;

productInfo是一个包含道具的对象，如下所示：

{"key":19,"name":"Cooker","image":"https://.....d16bfa6d9c2e010cadc3fe6885448cbd.jpg_720x720q80.jpg","price":123}

当我单击任意行的"编辑"按钮时，AddEditProductModal会显示产品的正确默认值。但是，当我单击另一个产品/行时，即使productInfo状态(在探查器中看到)发生了更改，AddEditProductModal仍然显示旧值。基本上，productInfo状态在父对象中发生了变化，但子对象没有重新呈现，这就是我的想法。

有人能解释为什么模态在第一次点击时显示信息，但在第二次点击时无法重新渲染并显示旧产品信息吗？

Answer 1

是的，你是对的！首先，antdForm的APIinitialValues只有在初始化或重置时才有效。其次，安特莫代尔不会在关闭后破坏。这就是你说的结果。

方法A：照你说的做，

useEffect(() => {
form.setFieldsValue(productInfo);
}, [productInfo]);

方法B:Modal集true的destroyOnClose属性也会解决您的问题，但这不是一个好选择！

const AddEditProductModal = ({ title, visible, productInfo, onOk, onCancel, onFinish }) => {
return (
<Modal
title={title}
visible={visible}
onOk={onOk}
onCancel={onCancel}
+destroyOnClose+
>
...

Answer 2

我得到了问题的答案。这似乎是antdForm组件initialValues的问题，而不是反应。initialValues似乎没有改变，我们需要显式地更新这些值。将以下内容添加到我的AddEditProductModal解决了我的问题：

const [form] = Form.useForm();
useEffect(() => {
form.setFieldsValue(productInfo);
}, [productInfo]);

希望这有一天能帮助一些蚂蚁用户。