Javascript 使用react的天气小部件

我已经使用react创建了一个天气小部件，但现在我发现我需要扩展它，以便在页面重新加载时默认城市是伦敦（即，当页面重新加载时，伦敦的温度值将始终显示）

这里可以看到一个例子：

目前，您必须键入城市以检索位置温度

我的代码如下：

从“React”导入React，{useState}

const api = {
    key: 'mykey',
    base: 'https://api.openweathermap.org/data/2.5/'
}

function App() {
    const [query, setQuery] = useState('');
    const [weather, setWeather] = useState({});
  
    const search = evt => {
      if (evt.key === "Enter") {
        fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
          .then(res => res.json())
          .then(result => {
            setWeather(result);
            setQuery('');
            console.log(result);
          });
      }
    }
  
    const dateBuilder = (d) => {
      let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
      let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  
      let day = days[d.getDay()];
      let date = d.getDate();
      let month = months[d.getMonth()];
      let year = d.getFullYear();
  
      return `${day} ${date} ${month} ${year}`
    }
  
    return (
      <div className={(typeof weather.main != "undefined") ? ((weather.main.temp > 16) ? 'app warm' : 'app') : 'app'}>
        <main>
          <div className="search-box">
            <input 
              type="text"
              className="search-bar"
              placeholder="Search..."
              onChange={e => setQuery(e.target.value)}
              value={query}
              onKeyPress={search}
            />
          </div>
          {(typeof weather.main != "undefined") ? (
          <div>
            <div className="location-box">
              <div className="location">{weather.name}, {weather.sys.country}</div>
              <div className="date">{dateBuilder(new Date())}</div>
            </div>
            <div className="weather-box">
              <div className="temp">
                {Math.round(weather.main.temp)}°c
              </div>
              <div className="weather">{weather.weather[0].main}</div>
            </div>
          </div>
          ) : ('')}
        </main>
      </div>
    );
  }
  
  export default App; 

const-api={
密钥：“mykey”，
基数：'https://api.openweathermap.org/data/2.5/'
}
函数App（）{
const[query，setQuery]=useState（“”）；
const[weather，setWeather]=useState（{}）；
const search=evt=>{
如果（evt.key==“输入”）{
fetch（`api.base}weather？q=${query}&units=metric&APPID=${api.key}`）
.then（res=>res.json（））
。然后（结果=>{
天气（结果）；
setQuery（“”）；
控制台日志（结果）；
});
}
}
常量日期生成器=（d）=>{
月份=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
设天=[“星期日”、“星期一”、“星期二”、“星期三”、“星期四”、“星期五”、“星期六”]；
let day=天[d.getDay（）]；
让date=d.getDate（）；
设月=月[d.getMonth（）]；
让year=d.getFullYear（）；
返回`${day}${date}${month}${year}`
}
返回(
16） ？'app warm'：'app'）：'app'}>
setQuery（e.target.value）}
值={query}
onKeyPress={search}
/>
{（typeof weather.main！=“未定义”）(
{weather.name}，{weather.sys.country}
{dateBuilder（新日期（））}
{数学圆度（天气主温度）}摄氏度
{weather.weather[0].main}
) : ('')}
);
}
导出默认应用程序；

我想知道是否有一种快速的方法将值state设置为London，以便在页面加载时显示

---

任何帮助都将不胜感激

您可以为查询提供默认值，并在第一次呈现后使用

useffect

触发搜索

import React, { useState, useEffect } from 'react';

const [query, setQuery] = useState('London'); // provide a default value
const [weather, setWeather] = useState({});

const fetchResult = () => {
  fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
      .then(res => res.json())
      .then(result => {
        setWeather(result);
        setQuery('');
        console.log(result);
      });
}

const search = evt => {
  if (evt.key === "Enter") {
    fetchResult();
  }
}

useEffect(() => {
  // search once after first render
  fetchResult();
}, []) // no dependency: execute it once after first render