时间戳

首页 > 解决方案 > 在子组件中克隆从父组件传递的对象 - React Hooks

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

问题描述

我使用扩展运算符和 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>
   )
}

标签： reactjsapiobjectreact-hooks

解决方案

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

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

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

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

推荐阅读