时间戳

首页 > 解决方案 > 使用功能后 React Hooks 状态被重置

javascript - 使用功能后 React Hooks 状态被重置

问题描述

我坚持使用 React Hooks 状态。我正在使用天气应用程序进行练习。我要求打开天气地图和一个名为algolia-places-react的组件。它连接到 Alglia API 以请求地名。

我正在尝试在城市名称更改时提出请求。看起来它工作正常，但是在设置新状态之前，有些东西将值状态更改为初始状态。它发生在 handleChange 函数上。例如，我添加了一个新变量 state 及其用于检查的函数：count和setCount. 当它进入 handleChange 时，控制台总是打印: 1，除了第一次。它没有增加。与{name: 'boston', countryCode:'us'}总是打印的情况相同{name: 'boston', ountryCode:'us'}，除了第一次。

import React, { useState, useEffect } from "react";
import { Segment, Form } from "semantic-ui-react";
import AlgoliaPlaces from "algolia-places-react";

export default function TempetureForm() {
  const [count, setCount] = useState(0);
  const [city, setCity] = useState({name: 'boston', countryCode:'us'});
  const [data, setData] = useState(null);

  const handleChange = ({ suggestion }) => {
    console.dir(suggestion)
    setCity({name: suggestion.name, countryCode: suggestion.countryCode})
    setCount(count + 1) 
    console.dir(count) // Always prints 1
    console.dir(city)  // Always prints {name: 'boston', countryCode:'us'}
  }

  useEffect(() => {
    console.dir(city)
    fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city.name},${city.countryCode}&appid=XXXXXXXXXXXXXXXXXXX`)
    .then(res => res.json())
    .then(data => setData(data));
  },[city]);

  return (
    <Segment basic>
      <Form>
        <Form.Field width={6}>
          <AlgoliaPlaces 
            placeholder='How weather is in ...'
            options={{
              appId: 'XXXXXXXXXXXXX',
              apiKey: 'XXXXXXXXXXX',
              language: 'en',
              type: 'city',
            }} 
            onChange={handleChange}
          />
        </Form.Field>
        {city.name + " " + city.countryCode}
          <p>{data && data.weather[0].description}</p>
      </Form>
    </Segment>
  );
}

标签： javascriptreactjsreact-hooksstatealgolia

解决方案

首先，检查是否在调用 setCount 后刚刚更新的值不是要走的路，因为该值尚未更新。有人建议这是因为设置值是异步的。我不知道，但这是有道理的。

console.dir(city)你useEffect应该在被调用后显示更新的值，因为handleChange它在被更新时被调用city。

推荐阅读