渲染来自 API 数组的数据会引发错误

Question

每当我尝试从 API object 内部的数组中渲染数据时，都会出现错误。 它只发生在 arrays 上。

这是我的错误。 但此时它仍在渲染我想要的数据。

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 文件中是我获取数据的地方

应用程序.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;

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

Answer 1

我不知道您的代码到底有什么问题，但我发现了多个有助于解决的问题：

应用程序App.js文件

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

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

• 您需要使用undefined而不是空数组[]来初始化useState钩子，以便我们可以按照前一点所述检查weather 。

  const [weather, setWeather] = useState()

• 您不需要将FontAwesomeIcon库传递给<Nav/>只需将其导入那里。

 <Nav weather={weather}/>

Nav.js文件

• 所有组件 props 都在 props object 中传递，所以这里需要对其进行解构。

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
}

我建议阅读的相关文章：

• 反应条件渲染
• 反应片段
• 在 react 中传递 props