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

Question

我对 React 和编程很陌生，所以请耐心等待。我正在学习一个教程，您可以在其中从开放天气 API 获取数据并显示它。我不喜欢的是有两个输入字段(城市(和(国家(，我想使用一个输入字段(城市，国家(来获取数据。在开放天气下可能有一个 API，但我想为将来的情况学习。在尝试了各种失败的尝试和谷歌搜索之后，我没有取得任何进展。如果还可以在通过 API 调用找到文本时错误句柄和"未处理错误"(在国家/地区字段中输入状态(，则加分

应用.js

import React, {useState} from 'react';
import Form2 from './Form2'
import Weather from './Weather'
import './App.css'
export default function App() {
const [weather,setWeather] = useState([])
const APIKEY = 'myKey'
async function fetchData(e) {
const city = e.target.elements.city.value
const country = e.target.elements.country.value
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)
if(city && country && city !== undefined && country !== undefined) {
setWeather({
data: apiData,
city: apiData.city,
country: apiData.sys.country,
description: apiData.weather[0].description,
temperature: Math.round(apiData.main.temp * 9/5 - 459.67),
error:""
}
)} else {
setWeather({
data: '',
city: '',
country: '',
description: '',
temperature: '',
error:"Please Type A City And Country"
}
)}
}
return (
<div className="App">
<h3>WEATHER APP</h3>
<Form2 getWeather={fetchData} />
<Weather
city={weather.city}
country={weather.country}
description={weather.description}
temperature={weather.temperature}
error={weather.error}
/>
{console.log(weather.data)}
</div>
);
}

表单.jsx

import React from 'react'
const Form2 = (props) => {
return (
<form onSubmit={props.getWeather}>
<input
type='text'
placeholder='city'
name='city'
/>
<input
type='text'
placeholder='country'
name='country'
/>
<button>Submit</button>
</form>
)
}
export default Form2;

天气.jsx

import React from 'react'
const Weather = ({description, location, error, temperature}) => {
return (
<div>
{location && <p>{location}</p>}
{temperature && <p>{temperature} °F</p>}
{description && <p>Conditions: {description}</p>}
{error && <p>{error}</p>}
</div>
)
}
export default Weather;

Answer 1

在你的 form.jsx 中，将你的 2 个输入替换为 1 个输入，我们称之为位置

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

为了给您带来更多挑战，我会在该输入中添加一些正则表达式，以便输入是城市名称，后跟空格，然后是国家/地区

然后在您的应用程序中.js，创建常量位置 = e.target.elements.location.value.split(" "( 然后替换

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

跟 const city = e.target.elements.location[0].value

和 常量国家 = e.target.elements.country.value

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

Answer 2

您可以在输入上分配一个value属性，也可以分配一个onChange函数来更新该值，然后您可以从 2 个变量中获取值。

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>
);
}

一个工作示例

Answer 3

我能够使用@laserany和本文的建议来解决此问题。我没有两个变量，我只是创建了一个数组，用于拆分表单上"位置"的用户输入。输入强制用户添加格式(xxx，xxx(的文本，否则它不会进行调用，但是，我需要在用户输入类似(fdsajio ，fdsaf(的内容中添加输入验证，因为这将触发未处理的拒绝(类型错误(： 无法读取未定义的属性"国家"

应用.js(部分代码已更改(

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)

Form.jsx(代码更改的一部分(

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