Javascript 如何延迟传递道具直到setState（）完成？

我有一个名为

renderLayers

的函数，它遍历

filterState

中的每个对象，并复制

选中的
属性设置为
true

  const [layers, setLayers] = useState([]);
  (...)
  const renderLayers = () => {
        const newLayers = []; 
        filterState.map(filter => (filter.checked && 
                          newLayers.push(filter.linkedTo)
        ));  
        setLayers(newLayers);
      }

然后我有一个组件将
层
数组作为道具。但是，我的代码在
setLayers
完成它的工作之前通过了它

<Component layers={layers}/>



在这种情况下，如何让程序等待
setLayers（）
完成？如果我使用条件呈现，例如
0&&layers}
，是否会出现
layers
仍然具有先前的值并将其传递到
setLayer（）
之前的情况
 听起来你想做这样的事情：

0？层：null}/>

如果
渲染层
可能会产生空数组，并且您希望将该空数组传递给
组件
，则可能需要将
层
初始化为
空
：

const[layers，setLayers]=useState（null）
// ...
返回

这样，当设置
layers
prop时，它将为
null
，直到使用不同的值调用
setLayers

如果，如您所说，
层
可以有一个您不想呈现的先前值，那么您现在在应用程序中有了额外的状态，用于确定是否应该向下传递
层
。对我来说，这闻起来很像肮脏的跟踪，但一个简单的解决方案可能只是将
层
切换为具有状态的对象（您不想在这里分离状态，因为多次调用setX可能会导致渲染不同步）

const[layers，setLayers]=useState（{data:[]，ready:false}）
常量渲染层=（）=>{
// ...
setLayers（{data:[“example”]，ready:true}）
}
返回
您可以使用条件渲染：

{layers.length > 0 && <Component layers={layers} />}

{layers.length>0&&}

组件
将不会呈现，除非
层中有内容
您不能要求程序本身“等待”，因为这并不能解决核心问题：应该向用户显示什么

您可以做的是在
layers
为空的情况下传递一个默认值：

<Component layers={layers.length > 0 ? layers : /*Some default value*/}/>

如果
layers
有一个以前的值，因此它不是空的，那么这种情况会不会导致与
ready
属性中的值保持为true相同的问题？我无法更改组件内部的逻辑，因为它来自库。“但是，我的代码在setLayers完成其工作之前通过了它。”根据您对代码功能的描述，这似乎是不可能的。请提供一个更完整的例子。何时/何地/何时调用
renderLayers
？“哪些层仍然具有以前的值并在setLayer（）之前传递它”，这取决于组件的总体工作方式。请提供更多信息。
const Component = props => {
    if props.layers && props.layers.lengh > 0 {
        return <Stuff/>
    } else {
        return <Loading/>
    }
}