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

Question

Making a weather app and I'm trying to update my api call on submit from a form. This is my first shot at making my own program and I've hit a block. I'm setting my API call from useState, and the idea is the user types in the city, hits the button, and the API call runs again and displays the new data from the city. I'm new to thinking as a programmer so I'm almost certain I'm missing something very simple.

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

I believe your useEffect isn't being called again, since you passed in a [] as your array of dependencies. Try doing useEffect(..., [city]) . That way, useEffect will be called on update of city

Answer 2

in

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

There is a typo. It should be event.target.value not event.target.value.city

And there is no need to have the onChange method.

And as you now know from what Victor said, useEffect will get called if the given dependency changes.

Answer 3

use this on useEffect

useEffect(..., [city])

and in handleSubmit there is the problem that event.target is where the click has been triggered, so in this case, the button, you must target the input

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

the rest of the code is ok