Javascript （TypeError）：未定义dayDataFiltered[0]

我正在试图找到一种方法来显示我的城市当前温度，通过使用和作为我的组件，它将在导航栏中显示“加载”，然后它将不会编译并给出错误

未处理的拒绝（TypeError）：dayDataFiltered[0]未定义

除了这一步，我遵循了开放天气部分的所有步骤，因为我无法真正理解它

您需要在html文件中添加指向天气图标css文件的链接，或者在构建过程中需要天气图标，或者您可以直接使用CDN

这是一段简短的代码

import React, {useState} from 'react';
import Modal from 'react-bootstrap/Modal'
import 'bootstrap/dist/css/bootstrap.min.css'
import {Navbar,Nav,NavDropdown} from 'react-bootstrap';
import {NavLink} from 'react-router-dom';
import './NavBar.css';
import ReactWeather from 'react-open-weather';


export default function NavBar (){

  const [show, setShow] = useState(false)

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  

    return(
      
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
         <Navbar.Brand as={NavLink} to= '/' className={"px-3"}>
           <h4 className={"fontSize4"}>Home</h4>
         </Navbar.Brand>
...
...
...
              <Nav>
              <Navbar.Text>
              <ReactWeather
                forecast="today"
                apikey="my actual key"
                type="city"
                city="Munich"
              />
              </Navbar.Text>
               <Nav.Link  as={NavLink} to= '/Login' className={"px-3"}>
                 <h4 className={"fontSize4"}>Login / Sign Up</h4>
               </Nav.Link>
              <Nav.Link as={NavLink} to= '/AboutUs' className={"px-3"} >
                 <h4 className={"fontSize4"}>About us</h4>
              </Nav.Link>
              </Nav>
           </Navbar.Collapse>
         </Navbar>


    );
  
}

import React，{useState}来自“React”；
从“反应引导/模式”导入模式
导入“bootstrap/dist/css/bootstrap.min.css”
从“react bootstrap”导入{Navbar，Nav，NavDropdown}；
从'react router dom'导入{NavLink}；
导入“/NavBar.css”；
从“react open weather”导入react weather；
导出默认函数导航栏（）{
const[show，setShow]=useState（false）
const handleClose=（）=>setShow（false）；
常量handleShow=（）=>setShow（true）；
返回(
家
...
...
...
登录/注册
关于我们
);
}

这就是它的样子

---

谢谢你的帮助

也许这能帮上忙。作为建议。避免使用不再可用的插件maintained@MihaiT我没有申请我的错误，但谢谢你，你知道在导航栏中显示温度的其他方式吗？它与导航栏无关。只需找到一个合适的插件，可以维护或下载更多。网上也有一些关于这方面的文档。像这个。通读并提取所需内容。@MihaiT他们使用类获取API调用，尝试在函数navbar中执行此操作不起作用，我对web开发非常陌生，我应该去哪里查看？

import React, {useState} from 'react';
import Modal from 'react-bootstrap/Modal'
import 'bootstrap/dist/css/bootstrap.min.css'
import {Navbar,Nav,NavDropdown} from 'react-bootstrap';
import {NavLink} from 'react-router-dom';
import './NavBar.css';
import ReactWeather from 'react-open-weather';


export default function NavBar (){

  const [show, setShow] = useState(false)

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  

    return(
      
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
         <Navbar.Brand as={NavLink} to= '/' className={"px-3"}>
           <h4 className={"fontSize4"}>Home</h4>
         </Navbar.Brand>
...
...
...
              <Nav>
              <Navbar.Text>
              <ReactWeather
                forecast="today"
                apikey="my actual key"
                type="city"
                city="Munich"
              />
              </Navbar.Text>
               <Nav.Link  as={NavLink} to= '/Login' className={"px-3"}>
                 <h4 className={"fontSize4"}>Login / Sign Up</h4>
               </Nav.Link>
              <Nav.Link as={NavLink} to= '/AboutUs' className={"px-3"} >
                 <h4 className={"fontSize4"}>About us</h4>
              </Nav.Link>
              </Nav>
           </Navbar.Collapse>
         </Navbar>


    );
  
}