我用React js做了一个编辑表单。我在表单中有多个组件。在其中一个子组件中，我将我所做的所有更改传递给主组件中的一个钩子，以便在firebase中进行更改。
父组件

const [changes, setChanges] = useState({});
const updateGenData = (genData) => {
    setChanges(genData);  
  }

儿子组件（我通过 prop 从父亲那里获取所有信息）

const UpdateProfileGenData = (props) => {

 const [values, setValues] = useState({});
 const [changes, setChanges] = useState({});

 useEffect(() => {
    setValues(props);
 },[props]); 

 const {field1, field2, field3} = values;

 useEffect(() => {
    props.updateGenData(changes);
},[changes]); 

  const handleChange= e => {
        setValues({
            ...values,
            [e.target.name]: e.target.value
        });
         setChanges({
          ...changes,
          [e.target.name]: e.target.value
      }) 
    }
return (

<input type="text" name="field1" value={field1} onChange={handleChange}/>
<input type="text" name="field2" value={field2} onChange={handleChange}/>
<input type="text" name="field3" value={field3} onChange={handleChange}/>

);
}
export default UpdateProfileGenData;

当我传递值时 它不允许我编辑子窗体。我不能改变任何领域。
有什么建议吗？？
问候