Fatal编程技术网
  • javascript/
  • Javascript React Weather简单应用程序-在codesandbox中工作，但在VSCode中不工作？

Javascript React Weather简单应用程序-在codesandbox中工作，但在VSCode中不工作？

javascript reactjs visual-studio-code

Javascript React Weather简单应用程序-在codesandbox中工作，但在VSCode中不工作？,javascript,reactjs,visual-studio-code,weather,codesandbox,Javascript,Reactjs,Visual Studio Code,Weather,Codesandbox,我正在制作一个带有地理位置的初学者React天气应用程序。这是代码。主代码位于App.js中每日和每小时仅用于显示 App.js import React, { useState, useEffect } from "react"; import Hourly from "./Components/Hourly"; import Daily from "./Components/Daily"; const App = () => { const [currentWeatherOn

我正在制作一个带有地理位置的初学者React天气应用程序。这是代码。主代码位于App.js中每日和每小时仅用于显示

App.js

import React, { useState, useEffect } from "react";
import Hourly from "./Components/Hourly";
import Daily from "./Components/Daily";

const App = () => {
    const [currentWeatherOne, setCurrentWeatherOne] = useState({});
    const [currentWeatherTwo, setCurrentWeatherTwo] = useState({});
    const [currentWeatherThree, setCurrentWeatherThree] = useState({});
    const [currentWeatherFour, setCurrentWeatherFour] = useState({});
    const [currentWeatherFive, setCurrentWeatherFive] = useState({});
    const [lat, setLat] = useState();
    const [long, setLong] = useState();
    const [today, setToday] = useState();
    const [tomorrow1, setTomorrow1] = useState({});
    const [tomorrow2, setTomorrow2] = useState({});
    const [refreshText, setRefreshText] = useState();

    const getPosition = () => {
        return new Promise((resolve, reject) => {
            navigator.geolocation.getCurrentPosition(resolve);
        });
    };

    const getWeather = async (lat, long) => {
        let a = await fetch(
            `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${long}&appid=dcadf332823cddfb979926a1414274e8&units=metric`
        );
        let b = await a.json();
        console.log(b);
        setCurrentWeatherOne(b.list[1]);
        setCurrentWeatherTwo(b.list[2]);
        setCurrentWeatherThree(b.list[3]);
        setCurrentWeatherFour(b.list[4]);
        setCurrentWeatherFive(b.list[5]);
        setToday(b.list[0]);
        setTomorrow1(b.list[11]);
        setTomorrow2(b.list[19]);
    };

    useEffect(() => {
        getPosition().then(data => {
            setLat(data.coords.latitude);
            setLong(data.coords.longitude);
            getWeather(data.coords.latitude, data.coords.longitude);
        });
    }, []);

    // console.log(currentWeatherOne, currentWeatherThree, currentWeatherFive);

    const refresh = () => {
        getWeather(lat, long);
        let hours = String(new Date().getHours());
        let minutes = String(new Date().getMinutes());
        let seconds = String(new Date().getSeconds());
        setRefreshText(
            `Updated as of: ${hours}:${minutes.length < 2 ? "0" : ""}${minutes}:${
            seconds.length < 2 ? "0" : ""
            }${seconds}`
        );
    };

    return (
        <div className="App">
            <header>Geolocation weather</header>
            <button onClick={refresh}>Refresh</button>
            <br />
            {refreshText}
            <hr />
            <h3>Hourly</h3>
            <div className="container-2">
                <Hourly
                    icon={currentWeatherOne.weather[0].icon}
                    time={currentWeatherOne.dt_txt}
                    minTemp={currentWeatherOne.main.temp_min}
                    maxTemp={currentWeatherOne.main.temp_max}
                    description={currentWeatherOne.weather[0].description}
                    humidity={currentWeatherOne.main.humidity}
                />
                <Hourly
                    icon={currentWeatherTwo.weather[0].icon}
                    time={currentWeatherTwo.dt_txt}
                    minTemp={currentWeatherTwo.main.temp_min}
                    maxTemp={currentWeatherTwo.main.temp_max}
                    description={currentWeatherTwo.weather[0].description}
                    humidity={currentWeatherTwo.main.humidity}
                />
                <Hourly
                    icon={currentWeatherThree.weather[0].icon}
                    time={currentWeatherThree.dt_txt}
                    minTemp={currentWeatherThree.main.temp_min}
                    maxTemp={currentWeatherThree.main.temp_max}
                    description={currentWeatherThree.weather[0].description}
                    humidity={currentWeatherThree.main.humidity}
                />
                <Hourly
                    icon={currentWeatherFour.weather[0].icon}
                    time={currentWeatherFour.dt_txt}
                    minTemp={currentWeatherFour.main.temp_min}
                    maxTemp={currentWeatherFour.main.temp_max}
                    description={currentWeatherFour.weather[0].description}
                    humidity={currentWeatherFour.main.humidity}
                />
                <Hourly
                    icon={currentWeatherFive.weather[0].icon}
                    time={currentWeatherFive.dt_txt}
                    minTemp={currentWeatherFive.main.temp_min}
                    maxTemp={currentWeatherFive.main.temp_max}
                    description={currentWeatherFive.weather[0].description}
                    humidity={currentWeatherFive.main.humidity}
                />
            </div>
            <h3>Daily</h3>
            <div className="container-1">
                <Daily
                    icon={today.weather[0].icon}
                    time={today.dt_txt}
                    minTemp={today.main.temp_min}
                    maxTemp={today.main.temp_max}
                    description={today.weather[0].description}
                    humidity={today.main.humidity}
                />
                <Daily
                    icon={tomorrow1.weather[0].icon}
                    time={tomorrow1.dt_txt}
                    minTemp={tomorrow1.main.temp_min}
                    maxTemp={tomorrow1.main.temp_max}
                    description={tomorrow1.weather[0].description}
                    humidity={tomorrow1.main.humidity}
                />
                <Daily
                    icon={tomorrow2.weather[0].icon}
                    time={tomorrow2.dt_txt}
                    minTemp={tomorrow2.main.temp_min}
                    maxTemp={tomorrow2.main.temp_max}
                    description={tomorrow2.weather[0].description}
                    humidity={tomorrow2.main.humidity}
                />
            </div>
        </div>
    );
};

export default App;

import React，{useState，useffect}来自“React”；
从“/Components/Hourly”每小时导入一次；
每天从“/Components/Daily”导入；
常量应用=（）=>{
const[currentWeatherOne，setCurrentWeatherOne]=useState（{}）；
const[currentWeatherTwo，setCurrentWeatherTwo]=useState（{}）；
const[currentWeatherThree，setCurrentWeatherThree]=useState（{}）；
const[currentWeatherFour，setCurrentWeatherFour]=useState（{}）；
const[currentWeatherFive，setCurrentWeatherFive]=useState（{}）；
const[lat，setLat]=useState（）；
const[long，setLong]=useState（）；
const[today，setToday]=useState（）；
const[tomorrow1，setTomorrow1]=useState（{}）；
const[tomorrow2，setTomorrow2]=useState（{}）；
const[refreshText，setRefreshText]=useState（）；
常量getPosition=（）=>{
返回新承诺（（解决、拒绝）=>{
navigator.geolocation.getCurrentPosition（解析）；
});
};
const getWeather=async（lat，long）=>{
让a=等待取回(
`https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${long}&appid=dcadf332823cdfb979926a1414274e8&units=metric`
);
让b=等待a.json（）；
控制台日志（b）；
setCurrentWeatherOne（b.list[1]）；
第二组（b.列表[2]）；
第三组（b.列表[3]）；
setCurrentWeatherFour（b.list[4]）；
第五组（b.list[5]）；
setToday（b.list[0]）；
setTomorrow1（b.list[11]）；
setTomorrow2（b.list[19]）；
};
useffect（（）=>{
getPosition（）。然后（数据=>{
setLat（数据坐标纬度）；
setLong（数据坐标经度）；
getWeather（data.coords.lation，data.coords.longitude）；
});
}, []);
//控制台日志（currentWeatherOne、currentWeatherThree、currentWeatherFive）；
常数刷新=（）=>{
getWeather（纬度、经度）；
让hours=String（newdate（）.getHours（））；
让minutes=String（newdate（）.getMinutes（））；
让秒数=字符串（newdate（）.getSeconds（））；
设置刷新文本(
`更新日期：${hours}:${minutes.length<2？“0”：“}${minutes}:${
秒。长度<2？“0”：“
}${seconds}`
);
};
返回(
地理位置天气
刷新


{refreshText}


每小时
每日的
);
};
导出默认应用程序；
每日

import React from "react";

const Daily = ({ icon, time, minTemp, maxTemp, description, humidity }) => {
  let timeToShow = time.split(" ")[0];
  let one = timeToShow.split("-")[0];
  let two = timeToShow.split("-")[1];
  let three = timeToShow.split("-")[2];

  maxTemp = Math.floor(maxTemp);
  minTemp = Math.floor(minTemp);
  description = description
    .split(" ")
    .map(word => {
      return word[0].toUpperCase() + word.substring(1);
    })
    .join(" ");

  return (
    <div className="weather">
      <div>
        {three}-{two}-{one}
      </div>
      <img
        src={`https://openweathermap.org/img/w/${icon}.png`}
        alt="weather icon"
      />
      <div>
        <div>
          <span className="temp">{maxTemp}</span>
          <span>{minTemp}</span>
        </div>
        <br />
        <div>{description}</div>
        <br />
        {humidity}% humidity
      </div>
    </div>
  );
};

export default Daily;

import React from "react";

const Hourly = ({ description, humidity, time, icon, minTemp, maxTemp }) => {
  let timeToShow = time.split(" ")[1];
  let first = timeToShow.split(":")[0];
  let second = timeToShow.split(":")[1];
  maxTemp = Math.floor(maxTemp);
  minTemp = Math.floor(minTemp);
  description = description
    .split(" ")
    .map(word => {
      return word[0].toUpperCase() + word.substring(1);
    })
    .join(" ");

  return (
    <div className="weather">
      <div>
        {first}:{second}
      </div>
      <img
        src={`https://openweathermap.org/img/w/${icon}.png`}
        alt="weather icon"
      />
      <div>
        <div>
          <span className="temp">{maxTemp}</span>
          <span>{minTemp}</span>
        </div>
        <br />
        <div>{description}</div>
        <br />
        {humidity}% humidity
      </div>
    </div>
  );
};

export default Hourly;

从“React”导入React；
const Daily=（{图标、时间、最小温度、最大温度、说明、湿度}）=>{
设timeToShow=time.split（“”[0]；
设1=timeToShow.split（“-”[0]；
设two=timeToShow.split（“-”[1]；
设三=timeToShow.split（“-”[2]；
maxTemp=数学地板（maxTemp）；
minTemp=数学地板（minTemp）；
描述=描述
.拆分（“”）
.map（word=>{
返回字[0].toUpperCase（）+字.substring（1）；
})
.加入（“”）；
返回(
{3}-{2}-{1}
{maxTemp}
{minTemp}


{说明}


{湿度}%湿度
);
};
每日导出默认值；
每小时

import React from "react";

const Daily = ({ icon, time, minTemp, maxTemp, description, humidity }) => {
  let timeToShow = time.split(" ")[0];
  let one = timeToShow.split("-")[0];
  let two = timeToShow.split("-")[1];
  let three = timeToShow.split("-")[2];

  maxTemp = Math.floor(maxTemp);
  minTemp = Math.floor(minTemp);
  description = description
    .split(" ")
    .map(word => {
      return word[0].toUpperCase() + word.substring(1);
    })
    .join(" ");

  return (
    <div className="weather">
      <div>
        {three}-{two}-{one}
      </div>
      <img
        src={`https://openweathermap.org/img/w/${icon}.png`}
        alt="weather icon"
      />
      <div>
        <div>
          <span className="temp">{maxTemp}</span>
          <span>{minTemp}</span>
        </div>
        <br />
        <div>{description}</div>
        <br />
        {humidity}% humidity
      </div>
    </div>
  );
};

export default Daily;

import React from "react";

const Hourly = ({ description, humidity, time, icon, minTemp, maxTemp }) => {
  let timeToShow = time.split(" ")[1];
  let first = timeToShow.split(":")[0];
  let second = timeToShow.split(":")[1];
  maxTemp = Math.floor(maxTemp);
  minTemp = Math.floor(minTemp);
  description = description
    .split(" ")
    .map(word => {
      return word[0].toUpperCase() + word.substring(1);
    })
    .join(" ");

  return (
    <div className="weather">
      <div>
        {first}:{second}
      </div>
      <img
        src={`https://openweathermap.org/img/w/${icon}.png`}
        alt="weather icon"
      />
      <div>
        <div>
          <span className="temp">{maxTemp}</span>
          <span>{minTemp}</span>
        </div>
        <br />
        <div>{description}</div>
        <br />
        {humidity}% humidity
      </div>
    </div>
  );
};

export default Hourly;

从“React”导入React；
const Hourly=（{说明、湿度、时间、图标、minTemp、maxTemp}）=>{
设timeToShow=time.split（“”[1]；
let first=timeToShow.split（“：”[0]；
let second=timeToShow.split（“：”[1]；
maxTemp=数学地板（maxTemp）；
minTemp=数学地板（minTemp）；
描述=描述
.拆分（“”）
.map（word=>{
返回字[0].toUpperCase（）+字.substring（1）；
})
.加入（“”）；
返回(
{first}:{second}
{maxTemp}
{minTemp}


{说明}


{湿度}%湿度
);
};
按小时导出默认值；
在codesandbox上，有时它不起作用，所以我要做的是对所有每日和每小时组件进行注释，等待2秒钟，让codesandbox重新加载，然后取消注释，通常它会起作用

在VSCode上并非如此。它会说currentWeatherOne.weather是未定义的，这意味着currentWeatherOne试图访问尚未存在的信息。我不明白，这不是承诺的全部意义吗？使用异步、等待等？这样它就等待返回结果，然后显示它？不管是什么原因，为什么它在codesandbox上工作而不是在VSCode上工作

我真的很想得到反馈和帮助。谢谢大家!

currentWeatherOne最初设置为空对象
{}
，您正在尝试访问返回部分中的
currentWeatherOne.weather[0]。图标
。由于
currentWeatherOne
中还没有
weather
可用，因此您将收到此错误

在第一次渲染后调用UseEffect，因此在初始渲染后调用获取天气信息的
getWeather
。在此之前，
currentWeatherOne
只是一个空对象

在这里解决了这个问题-

希望这有帮助。

currentWeatherOne最初设置为空对象
{}
，您正在尝试访问返回部分中的
currentWeatherOne.weather[0]。图标。因为天气不是一个好天气