呈现API数组中的数据时抛出错误

Question

每当我试图从API对象内部的数组中呈现数据时，我都会出错。它只发生在数组上。

这是我的错误。但目前它仍在呈现我想要的数据。

react_devtools_backend.js:4061 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at index.js:42.
at Nav (http://localhost:3000/main.92a9124351b8903c7446.hot-update.js:47:27)
at div
at App (http://localhost:3000/static/js/bundle.js:60:80)
at Router (http://localhost:3000/static/js/bundle.js:59561:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:59041:5)

问题是，在这一点上，它实际上是在渲染我想要的数据。但每当我再次刷新时，它就会抛出下一个错误，并完全破坏代码。

index.js:39 Uncaught TypeError: Cannot read properties of undefined (reading '0')
at Nav (index.js:39:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
at workLoopSync (react-dom.development.js:22707:1)`

这是我的密码。我已经在Nav.js文件中突出显示了引发错误的代码

在App.js文件中，im获取数据的位置

App.js

//Imports
import axios from 'axios'
import {useState, useEffect} from 'react'
import { Routes, Route } from 'react-router-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' 
import { faFacebook, faInstagram, faTwitter} from '@fortawesome/free-brands-svg-icons' 

//Components
import Nav from "./Components/Nav"
import Footer from "./Components/Footer"
//Pages
import Home from "./Pages/Home"
import Inventory from "./Pages/Inventory"
import Contact from "./Pages/Contact"
import About from "./Pages/About"
// CSS
import "./App.css";
// Contexts
import UserContext from "./Contexts/UserContext"
function App() {
const [weather, setWeather] = useState([])

useEffect(() => {

fetchWeather()
}, [])
const fetchWeather = async () => {
try {
const response = await axios.get("http://api.openweathermap.org/data/2.5/weather?lat=32.779167&lon=-96.808891&appid=a91119eebbd33281141d01dd1405669b")
setWeather(response.data)

} catch(error) {
console.log(error)
}
}


return (
<div className="App">

<Nav weather={weather} FontAwesomeIcon={FontAwesomeIcon} />
<Routes>
<Route path='/' element={<Home />} />
<Route path='inventory' element={<Inventory />} />
<Route path='about' element={<About />} />
<Route path='contact' element={<Contact />} />
</Routes>

<Footer  FontAwesomeIcon={FontAwesomeIcon} faFacebook={faFacebook} faInstagram={faInstagram} faTwitter={faTwitter}/>

</div>
);
}
export default App;

这是我的Nav.js文件，我在这里渲染我的API数据

// import { useContext } from 'react'
import { faSun, faCloud, faCloudRain } from "@fortawesome/free-solid-svg-icons";
import { Link } from "react-router-dom";
// import UserContext from ".../.../contexts/UserContext"

import "./Nav.css"
const Nav = (weather, FontAwesomeIcon) => {
console.log(weather)

// const lightmode = useContext(UserContext)
return (
<nav
className="navbar navbar-light navbar-expand-lg navigation-clean navContainer"

>
<div className="container-fluid">
<Link
className="navbar-brand "
to="/" 
>

Roc-City-Auto
</Link>
{/* WEATHER API */}
<div>{weather.weather.name}</div>
<div>{weather.weather.main?.temp}</div>

{/* CONDITIONAL RENDERING FOR WEATHER API DISPLAY */}
{/* ========== STACKOVERFLOW QUESTION BELOW ========== */}

{

weather.weather.weather?.main === "Sun" ? <FontAwesomeIcon icon={faSun} /> && <div>Its nice and sunny! Come on out to see us!</div> : null
}
{
weather.weather.weather[0]?.main === "Clouds" ? <FontAwesomeIcon icon={faCloud} /> && <div>It's a little cloudy, but rest assured, we are open and ready to help you!</div> : null
}
{
weather.weather.weather?.main === "Rain" ? <FontAwesomeIcon icon={faCloudRain} /> && <div>It's a little wet outside but we're open. Come on in!</div> : null
}

{/* ========== STACK OVERFLOW QUESTION ABOVE ========== */}

{/* MOBILE NAV BAR */}
<button
className="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#navcol-1"
>
<span className="visually-hidden">Toggle navigation</span>
<span className="navbar-toggler-icon"></span>
</button>
<div id="navcol-1" className="collapse navbar-collapse show">
<ul className="navbar-nav ms-auto">
{/* HOME */}
<li className="nav-item">
<Link
className="nav-link active "
to="/"

>
Home
</Link>
</li>
{/* INVENTORY */}
<li className="nav-item">
<Link
className="nav-link "
to="inventory"

>
Inventory
</Link>
</li>
{/* CONTACT */}
<li className="nav-item">
<Link
className="nav-link "
to="contact"

>
Contact Us
</Link>
</li>
{/* ABOUT */}
<li className="nav-item">
<Link
className="nav-link "
to="about"

>
About Us
</Link>
</li>
</ul>
</div>
</div> 
</nav>
);
};
export default Nav;

到目前为止，我已经尝试过使用可选链接，但没有成功。我还尝试为我想要的特定数据设置一个单独的状态，但仍然不起作用。这让我相信这是我访问数组的方式，其中包含我想要的数据。

Answer 1

我不知道你的代码到底出了什么问题，但我发现了多个有帮助的问题：

App.js文件

• 您提出的请求需要一些时间才能返回响应，因此您需要检查是否没有天气数据，返回加载状态

if(!weather){
return <div> Loading... </div>
}

• 您需要用undefined而不是空数组[]初始化useState挂钩，这样我们就可以如前一点所述检查weather

const [weather, setWeather] = useState()

• 您不需要将FontAwesomeIcon库传递给<Nav/>，只需将其导入即可

<Nav weather={weather}/>

Nav.js文件

• 所有组件道具都在道具对象中传递，因此需要在此处对其进行销毁

const Nav = ({ weather }) => {

• 由于破坏了道具，我们也需要更改这些值

<div>{weather.name}</div>
<div>{weather.main?.temp}</div>

• 使用<React.Fragment/>作为&&操作符将忽略图标，只打印<div/>

{
weather.weather[0].main === "Sun" ? <><FontAwesomeIcon icon={faSun} /> <div>Its nice and sunny! Come on out to see us!</div></> : null
}
{
weather.weather[0]?.main === "Clouds" ? <React.Fragment><FontAwesomeIcon icon={faCloud} /> <div>It's a little cloudy, but rest assured, we are open and ready to help you!</div></React.Fragment> : null
}

我建议阅读的相关文章：

• 反应条件渲染
• 反应碎片
• 反应中的传球道具