Блог

Я хотел создать веб-сайт в react.js . Я вызвал api, и в этом api есть некоторые свойства. Когда я вызывал какое-либо свойство, столкнулся с сообщением об ошибке. Я хочу показать свойство «cases» на своем веб-сайте, но при попытке получить доступ к состоянию формы свойства «case» появляется эта ошибка «TypeError: не удается прочитать свойство ‘cases’ неопределенного значения»

Мой код

 import Card from "react-bootstrap/Card";
import CardDeck from "react-bootstrap/CardDeck";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import axios from "axios";

function App() {
  const [latest, setLatest] = useState();
  
  useEffect(()=>{
    axios 
       .get("https://corona.lmao.ninja/v2/all")
       .then (res=>{ 
         setLatest(res.data);

       })
       .catch(err=>{
         console.log(err);
       })
  })
  
  return (
    <div>
      <CardDeck>
        <Card
          bg="secondary"
          text="white"
          className="text-center"
          style={{ margin: "10px"}}
        >
          <Card.Body>
            <Card.Title>Cases</Card.Title>
            <Card.Text>{latest.cases}</Card.Text>
          </Card.Body>
          <Card.Footer>
            <small>Last updated 3 mins ago</small>
          </Card.Footer>
        </Card>
  

Сообщение об ошибке

 ×
TypeError: Cannot read property 'cases' of undefined
App
C:/webdevelopment/project/covid/src/App.js:34
  31 | >
  32 |   <Card.Body>
  33 |     <Card.Title>Cases</Card.Title>
> 34 |     <Card.Text>{latest.cases}</Card.Text>
     | ^  35 |   </Card.Body>
  36 |   <Card.Footer>
  37 |     <small>Last updated 3 mins ago</small>
View compiled

  

API

 {
"updated": 1599367649631,
"cases": 27065812,
"todayCases": 11648,
"deaths": 883742,
"todayDeaths": 566,
"recovered": 19166178,
"todayRecovered": 10236,
"active": 7015892,
"critical": 60720,
"casesPerOneMillion": 3472,
"deathsPerOneMillion": 113.4,
"tests": 536587691,
"testsPerOneMillion": 69041.61,
"population": 7771946760,
"oneCasePerPeople": 0,
"oneDeathPerPeople": 0,
"oneTestPerPeople": 0,
"activePerOneMillion": 902.72,
"recoveredPerOneMillion": 2466.07,
"criticalPerOneMillion": 7.81,
"affectedCountries": 215
}
  

Вам необходимо инициализировать свою useState переменную. Попробуйте это:

 const [latest, setLatest] = useState({ cases: "" });
  

Объяснение
Перед запуском api, когда react пытается отобразить ваш компонент, который в это время {latest.cases} выдает ошибку как latest не инициализированный и, следовательно, принимает значение undefined .

вам необходимо установить начальное значение в пустой объект const [latest, setLatest] = useState({}); поскольку вы ожидаете ответа от api, ваше состояние не определено

пожалуйста, укажите, как показано ниже:

 const [latest,useLatest]=useState(null);
  

и в части визуализации:

 <Card.Text>{latest amp;amp; latest.cases}</Card.Text>
  

Приведенный выше код будет работать безотказно, если не установлена последняя версия, и рендеринг запускается до этого, что является случаем useEffect .