从我的父组件，我将状态变量数据作为道具传递给子组件。数据是通过fetch/UseEffect获取的。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>)
}
}
我的问题是，每当我单击父级中的按钮(设置状态(时，它会触发重新应答器，组件会重新应答两次(导致下面的console.log打印两次(，我敢说这是预期的行为，一次是因为setParam，一次在fetchData和setData完成时(。
export default function ChildComponent(props) {
const { data } = props
return (
<div>
// Prints twice, first stale data, then when fetchData has completed.
{ console.log(data )}
</div>)
}
我想问你们的问题是，我已经为此挣扎了几个小时，阅读了ChrisW在这里的帖子(使用useEffect获取数据时避免使用旧数据(和React.js Hooks常见问题解答(https://reactjs.org/docs/hooks-faq.html)，在上帝的绿色地球上(对不起任何无神论者！(我怎么只能访问子组件中新获取的、不过时的数据道具，而忽略过时的数据？是通过裁判吗？使用效果？(我知道我可以在子组件中使用数据作为依赖项来产生UseEffect，但是，我应该怎么处理它，毕竟我正在努力控制返回的内容？(
提前感谢您的回答！
我建议考虑使用Memo API来解决这个问题：
const MemoizedChildComponent = useMemo(({ data }) => <ChildComponent data={data} />, [data]);