React.js：如何从表单提交更新 API 调用

Question

制作一个天气应用程序，我正在尝试从表单提交时更新我的​​ api 调用。 这是我制作自己的程序的第一次尝试，但我遇到了障碍。 我正在从 useState 设置我的 API 调用，想法是用户在城市中键入，点击按钮，API 调用再次运行并显示来自城市的新数据。 我是程序员的新手，所以我几乎可以肯定我错过了一些非常简单的东西。

import React, { useState, useEffect } from 'react';
import {Card} from 'react-bootstrap';
import Aux from '../../hoc/Aux';
// import classes from './wCard.css';
// import {Button} from 'react-bootstrap';


function WCard () {
        const [city,setCity] = useState('Queens');
        // const key = 'APP_KEY';
        const [feels_like,setFeelsLike] = useState('');
        const [mainTemp,setMainTemp] = useState('');
        const [description,setDescription] = useState('');
        const [main,setMain] = useState('');
        const [iconID,setIconID] = useState('');
        
        // useEffect(() => {
            


        const handleChange = (event) => {
            event.preventDefault()
            setCity(event.target.value)
        }

        const handleSubmit = (event) => {
            event.preventDefault()
            setCity(document.getElementsByName("city")[0].value)
            fetch(
                'https://api.openweathermap.org/data/2.5/weather?q=' + (city) + '&appid&units=imperial'
            )
                .then((res) => res.json())
                .then((data) => {
                    console.log(data);
                    setFeelsLike(data.main.feels_like);
                    setMainTemp(data.main.temp);
                    setDescription(data.weather[0].description);
                    setMain(data.weather[0].main);
                    setIconID(data.weather[0].icon);
                })
        },[city])
        
        
       
    return (
        <Aux>
            <div>
                <label>City</label>
                <form onSubmit={handleSubmit} >
                    <input type="text" placeholder="Ayyy" onChange={handleChange} />
                    <button type="submit">Weather time</button>
                </form>
            </div>

        <div style={{ display:'flex', justifyContent:'center', padding:'5em' }} >
            <Card style={{ width: '24rem', marginTop: '-3em' }}>
                <Card.Img variant="top" src={"http://openweathermap.org/img/wn/" + iconID + "@2x.png"} />
                <h1 style={{ textAlign:'center', color:'#00BFFF' }} >{city}</h1>
                <Card.Body>
                    <Card.Title>{mainTemp}°, feels like {feels_like}°</Card.Title>
                    <Card.Text style={{ textTransform:'capitalize' }} >
                    {description}
                    </Card.Text>
                </Card.Body>
            </Card>
            </div>
        </Aux>
    )    
}

export default WCard;

Answer 1

我相信您的 useEffect 不会再次被调用，因为您传入了 [] 作为您的依赖项数组。 尝试做useEffect(..., [city]) 。 这样， useEffect 将在city更新时被调用

Answer 2

在

const handleSubmit = (event) => {
            event.preventDefault()
            setCity(event.target.value.city)
            
        }

有一个错字。 它应该是 event.target.value 而不是 event.target.value.city

并且不需要 onChange 方法。

正如你现在从 Victor 所说的那样，如果给定的依赖项发生变化， useEffect 将被调用。

Answer 3

在 useEffect 上使用它

useEffect(..., [city])

而在handleSubmit中存在的问题是event.target是点击被触发的地方，所以在这种情况下，按钮，你必须针对输入

const handleSubmit = (event) => {
        event.preventDefault()
        setCity(document.getElementsByName("city")[0].value)
    }

其余的代码没问题