避免React子组件中的陈旧数据属性
避免React子组件中的陈旧数据属性
提问于 2020-12-05 00:12:59
在父组件中，我将状态变量数据作为道具传递给子组件。通过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>)
}
}我的问题是，每当我点击parent中的按钮(设置状态)，这会触发重新渲染，组件会重新渲染两次(导致下面的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>)
}我要问你们的问题是，我已经在这里(Avoid old data when using useEffect to fetch data)和React.js Hooks常见问题解答(https://reactjs.org/docs/hooks-faq.html)上读了克里斯W的帖子几个小时了，是如何在上帝的绿色地球上(抱歉，任何无神论者！)我只能访问子组件中新获取的、非陈旧的数据属性，而忽略陈旧的数据属性？是通过裁判吗？UseEffect？(我知道我可以在带有数据作为依赖项的子组件中创建一个UseEffect，但是，我应该如何处理它，毕竟我正在尝试控制返回的内容？)
提前感谢您的回复！
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-12-05 00:41:58
我建议考虑使用useMemo API来解决这个问题：
const MemoizedChildComponent = useMemo(({ data }) => <ChildComponent data={data} />, [data]);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65152439
复制相关文章
相似问题
腾讯云开发者
