反应状态嵌套对象返回未定义[重复]

Question

首先，我有 useEffect()，它从 API 获取数据并将其传递给名为 companyData 的 React State

API 响应如下所示：

{
  "data": [
    {
      "date1": {
        "BalanceSheet": {
                   ... {JSON DATA}
        },
        "CashFlow": {
                    ... {JSON DATA}
        },
        "IncomeSheet": {
          ... {JSON DATA
      }
    
  ]
}

我的 useEffect 和 State 看起来像 ..

const [companyData,setCompanyData] = useState({});

useEffect(()=>{
  axios.get(`/api/company/view/${id}`).then((res)=>{
    setCompanyData(res.data[0]) 
  })
},[])

所以当我尝试访问companyData.date1.CashFlow（在 useEffect 之外）

点赞 console.log(companyData.date1.CashFlow)

它返回TypeError: companyData.date1 is undefined

但如果我尝试控制台记录 companyData 或 companyData.date1 它返回 JSON 没有任何错误

我的 React 组件代码：

export default function YourAnalysis(props){
const [companyData,setCompanyData] = useState({});
const [tableToShow,setTableToShow] = 
useState({incomesheet:false,balancesheet:false,cashflow:true});
const id = props.match.params.id 
useEffect(()=>{
  axios.get(`/api/company/view/${id}`).then((res)=>{
    setCompanyData(res.data[0]) 

  }).catch(err=>{
    console.log('an error')
  })

},[])




function renderTable(){
  if(tableToShow.incomesheet){
       return (<div></div>)
  }
  if(tableToShow.balancesheet){
    return (<div></div>)
  }
  if(tableToShow.cashflow){
 console.log(companyData) // works fine
 console.log(companyData.date1.CashFlow) // date1 is undefined 

  }
  
}

我认为这是因为 API 响应异步并且需要时间来分配\设置数据到 companyData 状态， 奇怪的是我可以访问和记录companyData 或companyData.date1 我会看到 JSON 数据，一切都很好 但是当我尝试访问 companyData.date1.CashFlow 或 companyData.date1.BalanceSheet 或 companyData.date1.IncomeSheet它返回 undefined

可能是因为date1的名字？

或者react有处理嵌套json对象的方法？

有什么帮助吗？我是反应新手

Answer 1

当你的组件第一次被渲染时，你将有一个空对象作为你的companyData，因为你在useState() 中提供了{}。只有在请求完成后，您的对象才会为空。

所以你的console.log 在第一次渲染时实际上是{}.date1.CashFlow - 未定义的错误。 使用标志来了解数据到达，或者在useState中为您的状态提供一些默认的非空对象@

Answer 2

这是因为 useEffect() 模拟了 Componentdidmount 和 Componentwillupdate 这意味着当您尝试控制台记录 useEffect 之外的数据时，实际上尚未加载数据。 使用此代码查看数据；

if(data){
//  your logic
}

并使用状态来存储 nikita 在她的回答中建议的数据