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

Question

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

​

Answer 1

当您的组件第一次呈现fetch请求时，它还没有完成，因此数据将为空(使用const {data, loading} = useFetch(url);查看)

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

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

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