在子组件中克隆从父组件传递的对象 - React Hooks答案

【问题标题】：Clone an object passed from a parent component in a child component - React Hooks在子组件中克隆从父组件传递的对象 - React Hooks
【发布时间】：2021-09-02 17:45:55
【问题描述】：

我使用扩展运算符和 useState 克隆从父组件传递的对象，但它返回一个空对象。任何帮助将不胜感激。谢谢:)

const Parent = () =>{

  //I fetch data from my custom hook
  const {data} = useFetch(url)

  return(
    <Child data={data}/>
  )
}

const Child = ({data}) =>{
   const [copyData, setCopyData] = useState({...data});
   
   
   //it returns an empty object here
   const testing = () =>{
    console.log(copyData)
   }
   
   return(
    <button onClick={testing}>Testing</button>
   )
}

【问题讨论】：

标签： reactjs api object react-hooks

【解决方案1】：

您的组件第一次呈现获取请求时尚未完成，因此数据将为空（使用const {data, loading} = useFetch(url); 查看此内容）

然后，您的子组件使用该 null 来设置 copyData 的默认值，而您永远不会更新它。

您需要添加一个 useEffect 以在每次数据更改时调用 setCopyData。可能是这样的：

useEffect(() => {
  setCopyData({...data});
}, [data]);

【讨论】：