React native 具有异步存储的动态构建组件

我正试图在函数_buildComponent中构建我的子组件，并将结果放入render（），请看下面的代码

我遇到的问题是AsyncStorage.getItem（）正在运行async，导致它在render（）方法中不呈现任何内容

…反应

 _buildComponent = async (key) => {
          let val = await AsyncStorage.getItem(key)
            console.log(key + ' : ' +val);
            debugger;//code will run to here after ScrollableTabView finish rendering. but I need to build Arr first.
          if(val == 1) return <PopularView tabLabel={key}>{key}</PopularView>
      }


render() {
            let Arr = Constants.TABS.map(item =
                return this._buildComponent(item).done();
          })

          debugger;//code will run into here directly without waiting building Arr above, making Arr was null when rendering ScrollableTabView

        return (
            <ScrollableTabView
                tabBarBackgroundColor='#2196F3'
                tabBarInactiveTextColor='mintcream'
                tabBarTextStyle={{marginTop:27}}
            initialPage={0}
            renderTabBar={() => <ScrollableTabBar/>}
            >

            {Arr}// Arr is null here because the _buildComponent method was not finish yet.
            {/* <PopularView tabLabel='Java'>Java</PopularView>
            <PopularView tabLabel='IOS'>IOS</PopularView>
            <PopularView tabLabel='Android'>Android</PopularView>
            <PopularView tabLabel='Javascript'>Javascript</PopularView> */}
          </ScrollableTabView>
        )
    }

\u buildComponent=async（key）=>{
let val=等待AsyncStorage.getItem（键）
console.log（键+'：'+val）；
debugger；//ScrollableTabView完成渲染后，代码将运行到此处。但我需要先构建Arr。
如果（val==1）返回{key}
}
render（）{
设Arr=Constants.TABS.map（项目=
返回此项。_buildComponent（item）.done（）；
})
调试器//代码将直接运行到这里，而无需等待上面构建Arr，从而在呈现ScrollableTabView时使Arr为null
返回(
}
>
{Arr}//Arr在这里为null，因为_buildComponent方法尚未完成。
{/*Java
国际标准化组织
安卓
Javascript*/}
)
}

---

我已经在评论中解释了我的问题，请检查一下，谢谢大家。我不知道在运行render（）之前准备变量的最佳做法是什么。

试试这个动态添加选项卡的解决方案（更新）

\u buildComponent=async（）=>{
设tabsData=[]；
等待AsyncStorage.multiGet（Constants.TABS）。然后（响应=>{
常量.TABS.forEach（（项目，索引）=>
{
如果（响应[索引][1]==1）{
tabsData.push（响应[index][0]）；//键
}
}
);
//这只渲染一次
this.setState（{tabLabels:tabsData}）
})
}
componentDidMount（）{
这是。_buildComponent（）
}
render（）{
const tabLabelList=this.state.tabLabels.map（（键）=>{
返回(
{key}
)
})
返回(
}
>
{tabLabelList}
)
}

您必须将默认选项卡置于State（）状态，在异步存储执行后，通过setState（）使用新选项卡更新选项卡，以便再次呈现整个选项卡view@NooruddinLakhani我应该如何将选项卡置于状态？我从未将组件置于状态。在您的情况下，您的组件对于选项卡是相同的，对吗？tabLabel是动态的，对吗？我的意思是，你对每个标签都使用相同的组件，是吗？你的方式确实有效，但需要增强，我在你的代码中添加了注释，你能看一下吗。谢谢，现在有效了。我已经更新了一点代码。就个人而言，RN不易使用，许多bugsVoting将高度赞赏：-）

_buildComponent = async () => {

    let tabsData = [];

    await AsyncStorage.multiGet(Constants.TABS).then(response => {

            Constants.TABS.forEach((item,index) => 
                {
                    if(response[index][1] == 1) {
                        tabsData.push(response[index][0]); // key
                    }
                }
            );

            // This only render once
            this.setState({ tabLabels: tabsData })
        })
}

componentDidMount() {
   this._buildComponent()
}

render() {
    const tabLabelList = this.state.tabLabels.map((key) => {
        return (
          <PopularView tabLabel={key}>{key}</PopularView>
        )
    })

    return (
        <ScrollableTabView
            tabBarBackgroundColor='#2196F3'
            tabBarInactiveTextColor='mintcream'
            tabBarTextStyle={{marginTop:27}}
        initialPage={0}
        renderTabBar={() => <ScrollableTabBar/>}
        >

        {tabLabelList}

      </ScrollableTabView>
    )
}