javascript - 如何延迟传递 props 直到 setState() 完成？

Question

我有一个名为 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() 之前传递它？

Answer 1

您不能要求程序本身“等待”，因为这并不能解决核心问题:应该向用户显示什么？

您可以做的是在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/>
    }
}