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])。这样，在更新city时将调用useEffect

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

剩下的代码还可以