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

Posted 2023-02-22

【中文标题】在子组件中克隆从父组件传递的对象 - React Hooks

【英文标题】：Clone an object passed from a parent component in a child component - 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>
   )

【参考方案1】：

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

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

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

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