Reactjs React中的功能组件未在道具更改时更新

我是新的反应，我已经创建了一个listContactComp，其中显示了列表，它有编辑按钮，以特定的元素。 在点击编辑按钮时，我正在调用editContactComp，它将id作为道具并获取特定的联系人数据

它会被获取，但不会在表单中更新

下面是editContactComp.js的代码

import React from 'react'
import { useRouteMatch} from "react-router-dom";
import ContactForm from "./ContactForm";

const EditContact = () => {
    const stateData = useRouteMatch();
    const contactId = stateData.params.contactId;
    console.log("insurer -> ", contactId);  //  gets printed
    const defContactData = {
        name: "",
        email: "",
        phone: "",
        status: false,
        address: ""
    }

    const [formDataUpdate, setContactData] = React.useState(defContactData);

    React.useEffect(() => {
        const fetchContact = async () => {
            const response = await fetch(`http://localhost:3008/fetchContact?id=${contactId}`);
            const contacts = await response.json();
            console.log("contact data ", contacts.data[0]);    // data is coming in array, oneElement
            setContactData(contacts.data[0]);
        }
        fetchContact();
    }, [contactId])

    const updateInsurer = async (contactData) => {
        console.log("edit contact");
        // update logic
    }

    return (
        <>
            <ContactForm contact={formDataUpdate} onSubmit={updateInsurer} />
        </>
    )
}

export default EditContact;

从“React”导入React
从“react router dom”导入{useRouteMatch}；
从“/ContactForm”导入ContactForm；
const EditContact=（）=>{
const stateData=useRouteMatch（）；
const contactId=stateData.params.contactId；
console.log（“保险公司->”，联系人ID）；//打印
常数deContactData={
姓名：“，
电邮：“，
电话：“，
状态：false，
地址：“
}
const[formDataUpdate，setContactData]=React.useState（defContactData）；
React.useffect（（）=>{
const fetchContact=async（）=>{
const response=等待获取(`http://localhost:3008/fetchContact?id=${contactId}`）；
const contacts=wait response.json（）；
console.log（“联系人数据”，contacts.data[0]）；//数据以数组形式出现，一个元素
设置ContactData（contacts.data[0]）；
}
fetchContact（）；
}，[contactId]）
const updateInsurer=异步（contactData）=>{
控制台日志（“编辑联系人”）；
//更新逻辑
}
返回(
)
}
导出默认编辑联系人；

联系方式为：

const ContactForm = ({ contact, onSubmit }) => {
    console.log("from props ", contact);    // whole data is printed here
    const [formData, setFormData] = React.useState(contact);
    console.log("insurer form values", formData);   // only default data is printed here and shown in form

    return (
        <>
        ... whole form body
        </>
    )
}

export default ContactForm;

const ContactForm=（{contact，onSubmit}）=>{
log（“来自道具”，联系人）；//所有数据都打印在这里
const[formData，setFormData]=React.useState（contact）；
console.log（“保险公司表单值”，formData）；//此处仅打印默认数据并在表单中显示
返回(
…整个身体
)
}
导出默认联系人表单；

正如@rdr20建议的那样：尝试使用

useffect（）

钩子在

中的

联系人上侦听更改

const ContactForm = ({ contact, onSubmit }) => {
    const [formData, setFormData] = React.useState(contact); // this runs only once, when the component is mounted, not when i.e. contact updates.
    
    useEffect(() => {
        setFormData(contact);
        }, [contact]) // now this listens to changes in contact

    return (
        <>
        ... whole form body
        </>
    )
}

export default ContactForm;

const ContactForm=（{contact，onSubmit}）=>{
const[formData，setFormData]=React.useState（contact）；//此操作仅在安装组件时运行一次，而不是在联系人更新时运行。
useffect（（）=>{
setFormData（联系人）；
}，[contact]）//现在它将侦听联系人中的更改
返回(
…整个身体
)
}
导出默认联系人表单；
您必须在ContactForm中再次使用useEffect（）来获取数据。这对我很有效。