编辑表单 React JS答案

【问题标题】：Edit Form React JS编辑表单 React JS
【发布时间】：2020-08-25 05:01:17
【问题描述】：

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

父组件

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

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

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;

当我将值从子组件传递给父组件时，它不允许我编辑子表单。我无法更改任何字段。

有什么建议吗？？

问候

【问题讨论】：

如何将 props 传递给 UpdateProfileGenData 组件？你能为此提供一个代码框或类似的东西吗？

标签： reactjs react-hooks react-props next

【解决方案1】：

你为什么经常使用useEffect？问题可能是您经常使用useEffect 并且在某个地方正确覆盖了数据。可以变得更容易：

父组件

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

子组件

const UpdateProfileGenData = ({field1, field2, field3, updateGenData}) => {

  const handleChange= e => updateGenData({
            [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;

【讨论】：