Javascript 无法读取未定义的React js的属性

所以我有来自API的数据，要在选项卡组件中呈现。。。从api接收数据并在组件中呈现数据的函数

问题是，尽管我将数据存储在Localstorage中，但数据并不是持久的， 正因为如此，当我调用GenerateTables方法并放入下面代码中的参数时，它会抛出错误-无法读取未定义的属性“topic”

有没有办法根据数据有条件地进行渲染？ 或者在读取参数之前等待数据？ 也许让它异步

问题摘要：

数据来自API——使用函数访问（参数作为道具传递给组件）——存储在localStorage中——从localStorage中设置状态——刷新页面——无法读取未定义的属性“topic”

我希望它在呈现在选项卡中之前等待数据。。。所以坚持并不是一个理想的解决方案

    useEffect(()=> {
        localStorage.setItem('news', JSON.stringify(news))
    },[])

    useEffect(()=> {
        const data = localStorage.getItem('news')
        const mainData = JSON.parse(data)
        setArticle(mainData)
        console.log(article)
        
    },[])
    
const generateTabs =  (topic, article)=> {
    
     
    return  <Tab tabType = 'tab' className ='nws-container-mid' topic = {topic} article = {article}  />
           
}

     
   

    return (
        <div className ="wrapper">
        
     
        <div className="container__Dash">
                <Header name = {name}/>


                <div className ="container__new">
                    
                    <div className ="container__tab surface"> 
                        <FeaturedNews  userOptions = {userOptions} country = {country} />
                        <PictureOfTheDay userOptions = {userOptions} />
                    </div>
                    <div className ="container__tab middle"> 
                        {/* {console.log(article[0].topic)} */}

                       {generateTabs((article[0].topic))}
                       {generateTabs()}
                       {generateTabs()}
                       <button onClick={openModal}>Set Modal </button>
                       <Modal showModal={showModal} setModal = {setModal} > </Modal>
                        
 
                    </div> 
                   
                       <div className ="container__tab footer">

                       {generateTabs()}
                       {generateTabs()}

                        <Settings />
                        <Weather location = {location} country = {country}/>
                    </div>
                </div>
            </div>
    </div>
    )
}

export default DashBoard

useffect（（）=>{
localStorage.setItem（'news'，JSON.stringify（news））
},[])
useffect（（）=>{
const data=localStorage.getItem（'news'）
const mainData=JSON.parse（数据）
setArticle（主数据）
console.log（文章）
},[])
const generateTabs=（主题、文章）=>{
返回
}
返回(
{/*{console.log（文章[0].主题）}*/}
{generateTabs（（文章[0].主题））}
{generateTabs（）}
{generateTabs（）}
设定模态
{generateTabs（）}
{generateTabs（）}
)
}
导出默认仪表板

useffect（）在渲染后执行。因此，对于第一次呈现，它呈现包装器div并尝试读取文章[0].topic]），但尚未设置文章状态，这就是发生错误的原因

要防止错误，请使用

 {article.length!==0 && generateTabs(article[0].topic,article[0].article)}

仅当项目数组不为空时，才会调用GenerateTables函数

此外，

{generateTabs（）}

不会将值传递给它，因此Tab组件的文章和主题将为空

  return  <Tab tabType = 'tab' className ='nws-container-mid' topic = {topic} article = {article}  />

返回