javascript - 尝试将 unix 时间戳转换为日期，但正在打印相同的天数。使用反应

Question

我正在调用一个提供 7 天每日预测的 api。我已经编写了代码来尝试将 dt unix 转换为天数..但我多次获得相同的时间...... https://gyazo.com/4f9d207ea2c3350c5fc30fa66d344634

api json - https://gyazo.com/a03056058730f97ed63a94489da0ec94

问题->https://gyazo.com/009e8367331c34ceb205e42d0710e142

我的代码 -

import Card from './components/Card';
import axios from 'axios';
import './App.css';



function App() {
const [query, updateQuery] = useState()
const [weather, updateWeather] = useState()
const [forecast, updateForecast] = useState()


const search = (evt) => {
  if (evt.key === "Enter"){
    axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${query}&appid=`).then((res) => {
      const currentData = res.data;
      
      updateQuery("")
      updateWeather(currentData)
      
      axios.get(`https://api.openweathermap.org/data/2.5/onecall?lat=${currentData.coord.lat}&lon=${currentData.coord.lon}&exclude=current,hourly,minutely,alerts&units=metric&appid=`).then((res) => {
        const forecastData = res.data;
 
  updateForecast(forecastData)


  const days = ['Friday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday'];

const fiveForecastDays = forecast.daily.map(({ dt }) => days[new Date(dt).getDay()]);
console.log(fiveForecastDays);
  
  
})

    })
   
  }
}




const queryHandler=(e)=>{
  // console.log(e.target.value)
  updateQuery(e.target.value)
  }
  

  return (
    <div className="App">
      <input onChange={queryHandler} value={query} onKeyPress={search} type="text"/>
        
    
    </div>

  );
}

export default App;

标签： javascriptreactjsapi

Answer 1

由于状态更新的异步特性，当你这样做时：

updateQuery("")
updateWeather(currentData)

它不会立即更新，因此下一行的请求会以先前的状态发送。

要解决此问题，您应该使用在此状态更新时触发的副作用触发请求useEffect：

useEffect(() => {
    axios.get(`https://api.openweathermap.org/data/2.5/onecall?lat=${currentData.coord.lat}&lon=${currentData.coord.lon}&exclude=current,hourly,minutely,alerts&units=metric&appid=`).then((res) => {
    const forecastData = res.data;
    updateForecast(forecastData)
    // ....
   
}, [currentData]);

updateQuery您的第一个请求也可能是更改的副作用。