我正在从我的 React 组件中获取远程数据。数据准备好后,将呈现子组件。在加载数据时,会显示“数据正在加载....”文本。
当组件由于props
更改而第二次呈现时,我将之前的数据设置null
为 以显示正在加载新数据。
const List = (props) => {
const [items, setItems] = useState(null);
useEffect(() => {
setItems(null);
fetch(`http://some_url_to_fetch_items.com?PAGE=${props.page}`)
.then((data) => {
setItems(data);
})
}, [props.page]);
if (!items) {
return "Data is loading ......."
}
return (
<ul>
{items.map(item => (
<li>{item}</li>
))}
</ul>
)
}
这种方法的问题在于,当组件第二次渲染时,setItems(null);
代码并没有立即执行(可能是因为useEffect
是异步执行的)并且组件重新渲染了 3 次而不是预期的 2 次:
setItems(null)
执行得太晚了)setItems(null)
最终执行后的第二次重新渲染我明白我的方法有什么问题。但我没有看到其他方式。必须使用钩子。
有任何想法吗?
一个快速的解决方法是在你的列表中添加一个关键道具:
<List key={page} page={page} />
当页面的值发生变化时,List 组件将被卸载,并呈现一个新的组件。新的不会有任何以前的数据,所以你只会得到 2 次渲染而不是 3 次。
这意味着您不必再设置以前的数据null
。
如果您这样做,您需要useEffect
在调用 之前检查组件是否仍然安装在您的组件中setItems
,否则您将尝试在未安装的组件上设置状态。你可以写:
if(setItems) {
setItems(data)
}
不过,更改密钥道具有点麻烦,因此我会研究其他方法来解决您的问题。
也许您应该将数据传递到列表中,而不是由列表负责获取数据,并将页面状态和数据都放在父组件中?
不过现在,使用页面更改密钥应该可以工作。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句