Html 在React Js in Fetch语句中获取用户输入

我已经创建了一个从api获取天气数据的代码。在这里的链接中，我给了一个地方q=chennai。我需要更改此位置字段，具体取决于用户。也就是说，我想从用户处获取此位置。我如何使用react进行此操作

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

const Home1=()=>{
    const[info,setInfo]=useState({
        name:"loading !!",
        temp:"loading",
        humidity:"loading",
        desc:"loading",
    })
    useEffect(()=>
    {
        getWeather()
    })
    const getWeather=()=>
    {
        fetch('http://api.openweathermap.org/data/2.5/weather?q=chennai&appid=bd2d67a73f2dc8279......')
        .then(data=>data.json())
        .then(results=>{
           //console.log(results)
           setInfo({
               name:results.name,
               temp:results.main.temp,
               humidity:results.main.humidity,
               desc:results.weather[0].description,
           })
        })
    }

    return(
        <div>
            <h1>Weather API</h1>
            <div>
                 Place:{info.name} <br/>
                 Temperature:{info.temp} <br/>
                 Humidity:{info.humidity} <br/>
                 Description: {info.desc}
            </div>
        </div>
    )
}

export default Home1;```

Can somebody help me to do this ?

import React，{useState，useffect}来自“React”；
常量Home1=（）=>{
const[info，setInfo]=useState({
名称：“正在加载！！”，
温度：“加载”，
湿度：“装载”，
描述：“装载”，
})
useffect（（）=>
{
getWeather（）
})
常量getWeather=（）=>
{
取（'http://api.openweathermap.org/data/2.5/weather?q=chennai&appid=bd2d67a73f2dc8279......')
.then（data=>data.json（））
。然后（结果=>{
//console.log（结果）
setInfo({
name:results.name，
温度：results.main.temp，
湿度：结果。主要。湿度，
desc:results.weather[0]。说明，
})
})
}
返回(
天气空气污染指数
地点：{info.name}

温度：{info.temp}

湿度：{信息湿度}

描述：{info.desc}
)
}
导出默认Home1```
有人能帮我做这个吗？

您必须从用户那里获取输入并编写一个onChange事件处理程序。获得输入后，可以调用getWeather函数，并将从用户处获得的值传递给该函数。这是解决办法-

import React，{useState，useffect}来自“React”；
常量Home1=（）=>{
const[info，setInfo]=useState({
名称：“正在加载！！”，
温度：“加载”，
湿度：“装载”，
描述：“装载”，
})
常量[inputValue，setInputValue]=useState（“”）；
useffect（（）=>
{
getWeather（“钦奈”）
})
const getWeather=（值）=>
{
取回(`http://api.openweathermap.org/data/2.5/weather?q=${value}&appid=bd2d67a73f2dc8279……`）
.then（data=>data.json（））
。然后（结果=>{
//console.log（结果）
setInfo({
name:results.name，
温度：results.main.temp，
湿度：结果。主要。湿度，
desc:results.weather[0]。说明，
})
})
}
const handleInputChange=事件=>{
让inputValue=event.target.value；
console.log（event.target.value）；//您将在此处输入值。您只需将值传递给函数即可
设置输入值（输入值）；
getWeather（输入值）；
}
返回(
天气空气污染指数
地点：{info.name}

温度：{info.temp}

湿度：{信息湿度}

描述：{info.desc}
)
}
导出默认Home1您可以使用受控输入为用户提供选择位置的可能性

const[city，setCity]=useState（“钦奈”）//初始化城市默认值
...
useEffect（（）=>{getWeather（城市）}，[城市]）
//将城市作为依赖项添加到效果中，并将值传递给getWeather方法
...
取回(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=bd2d67a73f2dc8279……`）
//创建url以获取模板字符串，以便可以在其中插入城市状态
...
设置城市（e.target.value）}/>
//使用onChange方法添加输入

如果您想了解React中有关受控输入的更多信息，这是与文档相关的页面
问题是我想从用户那里获取位置，而不是在link中给出硬代码未能编译src\components\APICALL.js第11:5行：“handleChange”未定义无未定义第21:68行：“location”的意外使用无限制全局变量src\components\stackoveripget.js第15:20行：意外使用“location”无限制全局搜索关键字以了解有关每个错误的详细信息。在执行HandleInputChange时收到此错误谢谢。但它在第一次加载时是正确的。但在输入字段中输入值后，它抛出了错误未处理拒绝（TypeError）：无法读取未定义的如何处理此错误的属性“temp”。我已经修改了您所说的更改。是的，这是因为现在用户每次更改输入时您都会发出请求。对于某些值，天气数据不存在，“结果”变量返回404错误代码。请参阅文档中的“API错误”。你必须处理这个错误。将if语句放在setInfo方法之前，并检查响应的有效性