Question

我对React和编程通常还是很陌生，所以请多多包涵。我正在研究一个教程，您将从Open Weather API中获取数据并显示它们。我不喜欢有两个输入字段（城市）和（国家/地区），我想使用一个输入字段（城市，国家/地区）来获取数据。在开放天气下可能会有一个API，但是我想为将来的情况学习。在尝试了各种失败的尝试和Google搜索之后，我没有取得任何进展。如果您还可以通过API调用（在“国家/地区”字段中输入状态）找不到文本，则还可以通过错误处理和“未处理错误”获得加分。

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

Form.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;

Weather.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'
    />

对于您来说，更多的挑战是，我会在输入中添加一些正则表达式，以便输入内容是城市名称，后跟空格，然后是国家/地区

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

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

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

和 const country = 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>
  );
}

有效的example

Answer 3

我能够使用@laserany和article的建议来解决此问题。我没有创建两个变量，而是创建了一个数组，该数组将用户输入的“位置”在窗体上分开。输入强制用户以（xxx，xxx）格式添加文本，否则将无法进行呼叫，但是，我需要在用户输入（fdsajio，fdsaf）之类的地方添加输入验证，因为这将触发未处理的拒绝（TypeError）：无法读取未定义的属性“国家”

App.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>

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

3 个答案: