Reactjs React Hooks-将2个文本输入连接到1，通过API获取数据

一般来说，我对反应和编程非常陌生，所以请容忍我。我正在学习一个教程，您可以从OpenWeatherAPI获取数据并显示它。我不喜欢的是有两个输入字段（城市）和（国家），我想使用一个输入字段（城市、国家）来获取数据。可能有一个开放天气的API，但我想了解未来的情况。在尝试了各种失败的尝试和谷歌搜索之后，我没有取得任何进展。如果通过API调用（在国家/地区字段中输入状态）找不到文本时，您还可以处理错误和“未处理的错误”，则可获得额外积分

App.js

import React，{useState}来自“React”；
从“/Form2”导入Form2
从“./Weather”导入天气
导入“./App.css”
导出默认函数App（）{
const[weather，setWeather]=useState（[]）
常量APIKEY='myKey'
异步函数fetchData（e）{
const city=e.target.elements.city.value
const country=e.target.elements.country.value
e、 预防默认值（）
const apiData=等待获取(`https://api.openweathermap.org/data/2.5/weather?q=${city}、${country}&APPID=${APIKEY}`）
.then（res=>res.json（））
.然后（数据=>数据）
如果（城市和国家和城市！==未定义和国家！==未定义）{
塞特威瑟({
数据：apiData，
城市：apiData.city，
国家/地区：apiData.sys.country，
description:apiData.weather[0]。description，
温度：数学四舍五入（apiData.main.temp*9/5-459.67），
错误：“
}
)}否则{
塞特威瑟({
数据：“”，
城市：''，
国家：“，
说明：“”，
温度：''，
错误：“请键入城市和国家”
}
)}
}
返回(
天气应用程序
{console.log（weather.data）}
);
}

您可以在输入上指定一个

值

属性，以及一个

onChange

函数来更新该值，然后您可以从两个变量中获取值

function App() {
  const [value, setValue] = useState("");
  const handlSubmit = () => {
    if (value) {
      const splitted = value.split(",");
      console.log(`City is ${splitted[0]} and Country is ${splitted[1]}`);
    } else {
      console.log("Input is empty");
    }
  };
  return (
    <div className="App">
      <input
        value={value}
        onChange={e => setValue(e.target.value)}
        type="text"
        placeholder="city"
        name="city"
      />
      <button onClick={handlSubmit}>Submit</button>
    </div>
  );
}

函数应用程序（）{
const[value，setValue]=useState（“”）；
常量handlSubmit=（）=>{
如果（值）{
const splitted=value.split（“，”）；
log（`City是${splitted[0]}，Country是${splitted[1]}`）；
}否则{
log（“输入为空”）；
}
};
返回(
setValue（e.target.value）}
type=“text”
占位符=“城市”
name=“城市”
/>
提交
);
}

---

在form.jsx中，将2个输入替换为1个输入，我们称之为location

    <input
    type='text'
    placeholder='location'
    name='location'
    />

为了给你带来更多的挑战，我会在输入中添加一些正则表达式，以便输入是城市名称，后跟空间，后跟国家

然后在app.js中，创建const location=e.target.elements.location.value.split（“”） 然后替换

const city=e.target.elements.city.value

与 const city=e.target.elements.location[0]。值

及 const country=e.target.elements.country.value

与

---

const city=e.target.elements.location[1].value

我能够使用@laserany的建议和此解决这个问题。我没有使用两个变量，而是创建了一个数组，用于拆分表单上“location”的用户输入。输入强制用户添加格式为（xxx，xxx）的文本，否则它将不进行调用，但是，我需要添加输入验证，用户输入类似（fdsajio，fdsaf）的内容，因为这将触发未处理的拒绝（TypeError）：无法读取未定义的属性“country”

App.js（部分代码已更改）

Form.jsx（部分代码更改）

谢谢您的回复，但这并不能解决我的问题。该示例仍然有2个文本输入，城市和国家各一个。我只想使用1个文本输入（例如“罗马，意大利”）。然后必须将城市和国家解析到API中，以根据所需的API属性获取数据。那么，为什么不完全按照您所说的做呢？只需使用一个输入并从中解析城市和国家。您可以使用

String.prototype.split（）

命令以逗号分隔输入值，否则我仍然缺少一些内容？谢谢。我对反应和任何编程都是新手，所以我仍在试图找出如何在代码中应用我的想法。@CGermain我已经编辑了我的答案，看看这是否对你有帮助。唯一的问题是，使用可能没有以正确的格式输入，您将无法定义。也许考虑一下自动完成输入，谢谢！实际上，我尝试过定位，并将城市和州结合起来，但对“e.target.elements”和文本字段的处理方式没有很好的理解。我将对此做一些阅读，并在这里使用您的解决方案。我将计算正则表达式来处理输入上的“城市，国家”。

  async function fetchData(e) {
    const [city, country] = e.target.elements.location.value.split(', ')
       e.preventDefault()

    const apiData = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city},${country}&APPID=${APIKEY}`)
      .then( res => res.json())
      .then(data => data)

        <input
            id="location"
            name="location"
            placeholder="City, Country"       
          />
          </form>