仅在第二次单击后才反应 useState 挂钩更新

Question

在名为 Cities 的子组件中，我有一个带有 onClick 事件处理程序的按钮，该事件处理程序将 'worldCity' 的状态更新为 'London'，然后另一个按钮将状态更新为 'Paris'。问题在于，只有在单击两次按钮时，城市的状态才会更新。我读到这是因为更新状态是异步的，而 useEffect 是解决这个问题的方法。但是我尝试过的结果仍然是仅在单击两次按钮后才更新状态。

在城市子组件中（存在于其自己的单独页面上）

  const [worldCity, setWorldCity] = useState('')

  <button onClick={() => cityProp(setWorldCity('London'))}>
    London
  </button>
  <button onClick={() => cityProp(setWorldCity('Paris'))}>
    London
  </button>

在父组件中：

const Homepage = () => {
  const {
    worldCity,
    setWorldCity,
  } = WeatherState() // WeatherState() here is a context API where the useState hook is available throughout the application

使用更新后的城市调用 api 的函数：

// Fetch City by name API call
  const fetchCity = async (worldCity) => {
    setLoading(true)
    const { data } = await axios.get(WeatherAPI(worldCity, days))

    setWeather(data)
    setLoading(false)

    console.log('fetchCity called and city is:', worldCity)
  }

使用效果钩子（驻留在父组件中）：

  useEffect(() => {
    console.log('World city updated', worldCity)
  }, [worldCity])

以及使用子组件中原始按钮单击的 'worldCity' 变量调用 fetchCity 函数的子组件。

<CityWeather cityProp={() => fetchCity(worldCity)} />

Answer 1

你是对的。 setState 是异步的，您正在尝试获取天气而不等待 setState 完成。


  <button onClick={() => {
cityProp("london")
 setWorldCity("london") //<--- Will resolve later, useEffect with catch the result.
}>

您也可以这样做：

  <button onClick={() => {
const newCity = "london" //<--- newCity is now the current city. Use this inside of this function as worldCity will be stale until this function finishes.
cityProp(newCity)
 setWorldCity(newCity) 
}>

仅在第二次单击后才反应 useState 挂钩更新

React useState hook updating only after second click

reactjs

react-hooks

use-effect

use-state