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

其余的代碼沒問題