我在反应钩子和承诺方面仍然是新手。我有一个异步函数来调用带有返回值布尔值的firebase remoteConfig,我将该函数放在对象(menu.js组件)中,并在Sidebar.js组件中使用对象值,但是当我控制台登录时,“ mainActivate”键将使值Promise { <resolve>: true }
而不是布尔值。
我不确定如何解决此问题,下面是示例代码。
p / s:对不起,我的英语不完美。
用于远程配置的firebase功能
function.js
export const FRemoteConfig = async (param) => {
try{
const remoteConfig = firebase.remoteConfig()
remoteConfig.settings = {
minimumFetchIntervalMillis : 3600000
}
remoteConfig.defaultConfig = ({
'panelParam': '',
});
await remoteConfig.fetch()
const response = await remoteConfig.getBoolean(param)
console.log(response)
return response
}
catch(e){
console.log(e)
return(e)
}
}
此组件用于菜单列表。异步功能在mainActivate键中。 menu.js
import { FRemoteConfig } from "RConfig"
const config = {
dashboard: [
{
label: "Live",
key: "db_live",
Panel: livePanel,
icon: <img loading="lazy" src={icon} alt="Live"/>,
children: [],
lightIcon: <img loading="lazy" src={LightIcon} alt="Live"/>,
mainActivate: FRemoteConfig("communication")
}
]
}
渲染:如果返回值为true,则显示选项卡,否则不显示
sidebar.js
<div className="menu-list">
{
// menu
config[page].map( ({ icon, label, children, lightIcon, mainActivate}, i) => {
console.log(mainActivate) // ----> here does not return boolean.
return mainActivate ? (
<Tab
style={{fontSize: "16px", lineSpacing: "16px"}}
key={i}
i={i}
icon={icon}
lightIcon={lightIcon}
label={<span className="font">{label}</span>}
children={children}
setFilter={setFilter}
mainActivate={mainActivate}
/>
) : null
})
}
</div>