当输入值是文本字段中的变化时，请立即恢复问题

Question

我的应用程序依赖“城市”值来调用API并接收数据栏，为此，我设置了一张表格，使其在我的城市使用setState值，并在我的主应用程序上使用使用效率值。曼城是通过意见提交的，它将养育。问题在于，一旦更改了输入的文本，setCity函数立即关闭，并且不等待提交功能。有帮助吗？

import * as React from 'react';
import '../cssdirect/App.css'
import Icon from './Icon'
import Wind from './Wind'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faDroplet } from '@fortawesome/free-solid-svg-icons'
import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import PinDropIcon from '@mui/icons-material/PinDrop';
import { useState, useEffect } from 'react';
const Daily = ({coord, weather, main, visibility, wind, clouds, sys, timezone, name, dt, setCity, city}) => {
    const [time, setTime] = useState('')

    function timeConverter(dt){
        var a = new Date(dt * 1000);
        var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
        var year = a.getFullYear();
        var month = months[a.getMonth()];
        var date = a.getDate();
        var hour = a.getHours();
        var time = date + ' ' + month + ' ' + year + ' ' + hour;
        return time;
      }
      const handleSubmit = (e) =>{
        e.preventDefault()
        console.log(city) 
      }      

      useEffect(()=>{
        setTime(timeConverter(dt))
      },[])
  return (
    <>
            <h1 className='title'>Monkey Wit Da Weather</h1>
            <div className="textInput" 
            onSubmit={handleSubmit}>
            <TextField id="outlined-basic" 
            placeholder='city'  
            name='city' 
            type="text" 
            onSubmit={(event)=>setCity(event.target.value)} 
            value={city}
            InputProps={{
          startAdornment: (
            <InputAdornment position="start">
              <PinDropIcon/>
            </InputAdornment>
          ),
        }} variant="standard" />
        <button className="submit" onClick={handleSubmit} type="submit"><FontAwesomeIcon icon={faArrowRight} /></button>    
        </div>
          
    </>
  )
}

export default Daily

app.js

import './cssdirect/App.css';
import Daily from './components/daily';
import {useState, useEffect} from 'react'
import Loading from './Loading';

function App() {
const [loading, setLoading] = useState(true)
const [city, setCity] = useState('Forest%20Hills')
const [weatherData, setWeather] = useState([])


const getWeather = async() =>{
  setLoading(true)
  try{
    const resp = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=f8d957da06af592a1390c360ea801908&units=imperial`)
    const pResp = await resp.json()
    setWeather(pResp)
    setLoading(false)
  }
  catch{
    console.log('error')
  }
}

useEffect(()=>{
  getWeather()
},[city])

  if(loading==true){
    return <Loading/>
  }
  else{
    return <Daily {...weatherData} setCity={setCity} city={city}/>
  }
}

export default App;

Answer 1

是的，这应该是您编码的行为，因为您使用使用 city 作为触发 getweather 的依赖性异步函数（在 app.js 中检查以下代码）。每当 City 状态在重新渲染期间发生变化时，就会发生这种触发。

useEffect(()=>{
  getWeather()
},[city])

您需要的是触发 getweather async函数进行提交时，而不是更改 City 时。因此，将 getweather async函数传递给儿童组件（ daily ）作为道具，并在 handleseubmit 中称其为以下内容。

      const handleSubmit = (e) =>{
        e.preventDefault()
        console.log(city) 
        getWeather()
      }   

此外，还要删除前面提到的使用效果。

顺便说一句，我认为如果您使用 onChange 事件，而不是 onsubmit 内部 textfield 来自材料UI的组件，则更好。 （参考）

<TextField
  id="outlined-basic"
  placeholder="city"
  name="city"
  type="text"
  onChange={(event) => setCity(event.target.value)}
  value={city}
  InputProps={{
    startAdornment: (
      <InputAdornment position="start">
        <PinDropIcon />
      </InputAdornment>
    ),
  }}
  variant="standard"
/>;