Question

将值传递给另一个组件时无法读取未定义的属性（读取“0”）

2022-04-18

110

javascript reactjs

我编写了以下代码来将值传递给信息框，但我收到错误未捕获的 TypeError：无法读取未定义的属性（读取“0”）。请告诉我错在哪里。

import React,{useState} from 'react'
function App() {
   const [specificState, setSpecificState] = useState({});
   const jsondata1 = await fetch('https://covid-19-fastest-update.p.rapidapi.com/summary');
    const myData1 = await jsondata1.json();
    const indData = myData1.Countries[77];
   const getdata=()=>{
    const temp =[];
     temp ['Confirmed']= [indData.NewConfirmed, indData.TotalConfirmed]
     temp['Recovered'] = [indData.NewConfirmed, indData.NewConfirmed - indData.TotalDeaths]
     temp ['Deaths']= [indData.TotalDeaths, indData.NewDeaths] 
    setSpecificState(temp);
   }
   useEffect(() => {
    getdata();
   }, [])
   
  return (
    <div> <InfoBox title="Coranavirus cases" cases={ specificState.Confirmed[0] } 
   total={ specificState.Confirmed[1] } />  </div>
  )
}

export default App

Answer 1

您需要在 useEffect 内部发出获取请求。

像这样更新您的获取数据函数；

const getdata=()=>{
  const jsondata1 = await fetch('https://covid-19-fastest-update.p.rapidapi.com/summary');
    const myData1 = await jsondata1.json();
    const indData = myData1.Countries[77];
    const temp =[];
     temp ['Confirmed']= [indData.NewConfirmed, indData.TotalConfirmed]
     temp['Recovered'] = [indData.NewConfirmed, indData.NewConfirmed - indData.TotalDeaths]
     temp ['Deaths']= [indData.TotalDeaths, indData.NewDeaths] 
    setSpecificState(temp);
   }

从组件主体中删除获取和其他操作。

然后您需要等待状态被获取，您需要有条件地呈现您的组件。

return (
    <div> {spesificState.Confirmed && <InfoBox title="Coranavirus cases" cases={ specificState.Confirmed[0] } 
   total={ specificState.Confirmed[1] } /> } </div>
  )
}

也许是这样的。

Answer 2

当状态最初加载时， specificState 是一个空对象，因此找不到 Confirmed 属性（未定义）

因此在首次渲染时，这将引发此异常。当 useEffect 运行并检索结果时，将加载此属性，然后您可以使用 InfoBox 类。

因此，请改用

return (
   {specificState.Confirmed ?  <div> <InfoBox title="Coranavirus cases" cases={ specificState.Confirmed[0] } 
   total={ specificState.Confirmed[1] } />  </div> : null }
  )

Answer 3

您可以在 useEffect 钩子中使用 if 运算符创建语句，因为现在当您尝试使用 indData 时，您获取的数据尚未上传。只需在 useEffect 中覆盖您的 getdata 函数，如下所示：

useEffect(() => {
   if (indData) {
     getdata();
   }
}, [indData])

此外，您需要在 InfoBox 组件中传递案例和总属性时添加额外的值，只需使用 | [] 传递空数组即可