Question

在 React 中从对象解构嵌套数组时出错

2023-03-07

221

javascript reactjs arrays react-hooks

当我尝试使用 React 应用程序中的 useContext 钩子从 API 接收的对象访问嵌套数据时遇到问题。我收到的错误消息是：“Uncaught TypeError：无法读取未定义的属性（读取‘forecastday’）”。奇怪的是，当我尝试使用原始 JavaScript 访问相同数据时，它没有任何错误。

我怀疑我的 Context.jsx 文件可能有问题，但我无法确定具体的问题。

对象数据

weatherReport = {
      "location": {object Data},
      "current": {object Data},
      "forecast": {
        "forecastday": [
          {
            "date": "2023-03-07",
            "date_epoch": 1678147200,
            "day": {
              "maxtemp_c": 36.1,
              "maxtemp_f": 97.0,
              "mintemp_c": 17.4,
              "mintemp_f": 63.3,
              "avgtemp_c": 25.6,
              "avgtemp_f": 78.1,
              "maxwind_mph": 9.6,
              "maxwind_kph": 15.5,
              "totalprecip_mm": 0.0,
              "totalprecip_in": 0.0,
              "totalsnow_cm": 0.0,
              "avgvis_km": 10.0,
              "avgvis_miles": 6.0,
              "avghumidity": 22.0,
              "daily_will_it_rain": 0,
              "daily_chance_of_rain": 0,
              "daily_will_it_snow": 0,
              "daily_chance_of_snow": 0,
              "condition": {
                "text": "Sunny",
                "icon": "//cdn.weatherapi.com/weather/64x64/day/113.png",
                "code": 1000
              },
              "UV": 7.0
            },
        },
}

React 组件代码

import { useGlobalContext } from "../context"

const ForecastReport = () => {
  const { forecast: { forecastday: [...forecastday] } } = useGlobalContext()

  console.log(forecastday)

  return <div className="forecast-box">
    Forecast Report
  </div>
}

export default ForecastReport

控制台上的错误

"Uncaught TypeError: Cannot read properties of undefined (reading 'forecastday')

原始 js

const {forecast:{forecastday:[...forecastday]}} = weatherReport

    console.log(forecastday);

原始 js 的控制台

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]

[https://replit.com/@djbravo12/WeatherApplicationOpenWeatherorg#src/context.jsx](我的 repl 链接)

Answer 1

出现错误是因为当您的页面刷新或渲染时，上下文状态中不会设置上下文数据。它出现 “未捕获的类型错误：无法读取未定义的属性”

您需要在存储上下文状态值时写入条件，然后您才能访问它。

Answer 2

forecast 可能尚不可用，因此您会遇到未定义的问题。

确认 forecast 已定义后，尝试在 useEffect 钩子中更新。

您可以执行以下操作：

import { useState, useEffect } from "react";
import { useGlobalContext } from "../context";

const ForecastReport = () => {
  const { forecast } = useGlobalContext();
  const [forecastDay, setForecastDay] = useState(null);

  useEffect(() => {
    if (forecast) {
      setForecastDay(forecast.forecastday);
    }
  }, [forecast]);

  return (
    <div className="forecast-box">
      Forecast Report
    </div>
  );
};

然后，一旦 forecastDay 的值从 null 更改为 null ，您就可以对它执行任何您想做的事情。

Answer 3

我确信，这个问题是由于您的上下文而发生的。因此，当您分享上下文代码时，它会更加清晰。

顺便说一句，我已经在我这边测试过了。但一切正常。

这是我的代码（应用程序和数据组件）。

// import context
import { DataContextProvider, useData } from "./contexts/DataContext";

const Data = () => {
  const {
    people: {
      users: [...usersInfo],
    },
  } = useData();
  console.log(usersInfo);
  return <div>hello Data</div>;
};

const App = () => {
  return (
    <div className="App">
      <DataContextProvider>
        <Data />
      </DataContextProvider>
    </div>
  );
};

export default App;

这是我的数据上下文代码。

import { createContext, useContext } from "react";

const initialData = {
  type: "chat",
  people: {
    users: [
      {
        name: "Kevin",
      },
      {
        name: "Rebecca",
      },
      {
        name: "Pavlo",
      },
    ],
  },
};

const dataContext = createContext();

const useData = () => useContext(dataContext);

const DataContextProvider = ({ children }) => {
  return (
    <dataContext.Provider value={initialData}>{children}</dataContext.Provider>
  );
};

export { DataContextProvider, useData };

希望这会有所帮助。