我有一个名为 renderLayers
的函数它遍历 filterState
中的每个对象并复制 checked
属性设置为true
const [layers, setLayers] = useState([]);
(...)
const renderLayers = () => {
const newLayers = [];
filterState.map(filter => (filter.checked &&
newLayers.push(filter.linkedTo)
));
setLayers(newLayers);
}
然后我有一个组件需要 layers
数组作为 Prop 。但是,我的代码在 setLayers
之前通过了它完成它的工作。
<Component layers={layers}/>
在这种情况下,我怎样才能告诉我的程序等到 setLayers()
已经完成了?如果我使用条件渲染,例如 <Component layers={layers.length > 0 && layers}
,会不会出现layers
的情况仍然有以前的值并在 setLayer()
之前传递它?
最佳答案
您不能要求程序本身“等待”,因为这并不能解决核心问题:应该向用户显示什么?
您可以做的是在layers
为空的情况下传递默认值:
<Component layers={layers.length > 0 ? layers : /*Some default value*/}/>
或者,在 Component
内部,如果 layers
为空,您可以什么也不做。当layers
更新时,由于它被传递给Component
,Component
无论如何都会完全重新渲染。这种方法几乎总是首选,因为它可以更好地分离关注点。
示例:
const Component = props => {
if props.layers && props.layers.lengh > 0 {
return <Stuff/>
} else {
return <Loading/>
}
}
关于javascript - 如何延迟传递 props 直到 setState() 完成?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61604444/