Reactjs 避免React子组件中的过时数据属性

从父组件，我将状态变量数据作为道具传递给子组件。通过fetch/useffect获取数据。URL参数可以通过单击按钮进行修改，根据参数的不同，将获取完全不同的对象，这需要在子组件中以不同的方式处理

export default function ParentComponent() {
  const [data, setData] = useState({})
  const [param, setParam] = useState('')
  const [isLoading, setLoading] = useState(true)

  useEffect(() => {
    const fetchData = async () => {
      const data= await (await fetch(`https://myapi.com/?param=${param}`)).json()

      setData(data)
      setLoading(false)
    }

    fetchData()
  }, [param])

return (<div>
    { isLoading ? 
      (<span>Loading...</span>)           
      : 
  (<div>
    <button onClick={() => setParam('something')}>Click me</button>
      <ChildComponent data={ data } />
  </div>

      </div>)
   }
}

导出默认函数ParentComponent（）{
const[data，setData]=useState（{}）
const[param，setParam]=useState（“”）
常量[isLoading，setLoading]=useState（真）
useffect（（）=>{
const fetchData=async（）=>{
常量数据=等待（等待获取）(`https://myapi.com/?param=${param}`）.json（）
setData（数据）
设置加载（错误）
}
fetchData（）
}，[param]）
返回(
{孤岛加载？
（装载…）
: 
(
setParam（'something'）}>单击我
)
}
}

我的问题是，每当我单击父级中的按钮（设置状态），它会触发重新渲染器，组件会重新渲染两次（导致下面的console.log打印两次），我敢说这是预期的行为，一次是因为setParam，一次是在fetchData和setData完成时）

导出默认函数子组件（props）{
常量{data}=props
返回(
//打印两次，第一次是陈旧数据，然后在fetchData完成时打印。
{console.log（数据）}
)
}

我想问大家的问题是，在阅读了ChrisW的帖子（）和React.js Hooks FAQ（）之后，我已经为此苦苦挣扎了几个小时了，在上帝的绿色地球上（对不起，任何无神论者！）我怎么只能访问子组件中新获取的、非陈旧的数据道具，而忽略陈旧的数据道具？是通过裁判吗？使用效果？（我知道我可以将数据作为依赖项在子组件中生成UseEffect，但是，我应该如何处理它，毕竟我正在尝试控制返回的内容？）

---

提前感谢您的回答

>P>我建议考虑解决这个问题：

const MemoizedChildComponent = useMemo(({ data }) => <ChildComponent data={data} />, [data]);

const MemoizedChildComponent=usemo（{data}）=>，[data]）；

const MemoizedChildComponent = useMemo(({ data }) => <ChildComponent data={data} />, [data]);