Блог

 import { useState , useEffect} from "react";
import 'semantic-ui-css/semantic.min.css'
import { Header, Button , Container, Image} from 'semantic-ui-react'
import dotalLogo from './dota2.png'

import React from "react";
import Loading from './loading'
const dataUrl = 'https://api.opendota.com/api/heroStats'

function App() {
 const [loading, setLoading] = useState(false)
 const [data, setData] = useState([])
 const [index, setIndex] = useState(0)

 const fecthApi = async () => {
   setLoading(true)
   try {
     const fetched = await fetch(dataUrl)
     const parsed = await fetched.json()
     setData(parsed)
     setLoading(false)
  
   } catch (error) {
     console.log('error')
     setLoading(false)
   }
 }

 useEffect(()=>fecthApi(),[])
 if (loading){
    return <Loading />
  }

  function nextBtn(e) {
    e.preventDefault()
    setIndex((prev)=>prev 1)
  }

  function backBtn(e) {
    e.preventDefault()
    setIndex((prev)=>prev-1)
  }

  return (
    <>
      <main id="main-content">
        <Container>
          <Header className='headings' as='h1' size='medium' style={{fontSize: 40}}>
            <img className="dota-logo" src={dotalLogo} alt="" />
            <Header.Content className="dota-header">Dota 2</Header.Content>
          </Header>
          <br />
          <Container className='middle-layer'>

            <Button 
              onClick={(e)=> nextBtn(e)} 
              className='change-btn-one' 
              content='Back' 
              icon='arrow left' 
              labelPosition='left' />

            <Image 
              className='dota-img' 
              src={"https://api.opendota.com"   data[index].img} 
              rounded
              alt='err' 
              bordered 
              centered/>

            <Button 
              onClick={(e)=> backBtn(e)} 
              className='change-btn-two' 
              content=' Next ' 
              icon='arrow right' 
              labelPosition='right' />

          </Container>
            </Container>
            <Container>
              <p>{data[index].localized_name}</p>
                </Container>
            <div className="contain"></div>
          </main>
        </>
      );
    }

export default App;
 

Я получаю ошибку после ее компиляции, но я определил ее и извлекаю данные с помощью асинхронного ожидания, но получаю

Ошибка типа: данные[индекс] не определены

Я застрял на несколько часов и до сих пор не нашел решения. Кроме того, я попытался уничтожить его, но все равно получаю ту же ошибку. Использование data.map() работает, но я хочу отображать только данные об одном герое за раз, а использование карты загрузит 120 данных о героях.

Я понимаю, что это довольно глупый вопрос, но я просто не могу его понять 🙂

данные[индекс] не определены до завершения выборки. Итак, данные[индекс].localized_name выдаст вам ошибку. вы можете написать это так.

 data[index] amp;amp; data[index].localized_name