使用React useContext hook进行分派调用后，反应状态不会更新

Posted 2021-04-27

[伙计们，React初学者在这里。因此，基本上，我正在尝试使用React useContext钩子获取更新后的状态。

state设置在放置了分派的函数调用中，并且该函数调用绑定到按钮onClick事件。

调用分派的函数：

const fetchLocation = async (id: number) => {
    const [, result] = await getLatestLocation()
    dispatch({ 
      type: "LOCATION_FETCHED", 
      payload: result 
    })
    console.log(result) //this prints the latest/updated location even on button first click
  }

减速器：

case "LOCATION_FETCHED": {
      return {
        ...state,
        location: payload,
      }
    }

组件中的函数调用：

const { 
    fetchLocation, 
    location
   } = React.useContext(locationContext)
  const [fetchingLocation, setFetchingLocation] = useState(false)
  const getLocation = (id: number) => {
     fetchLocation(id)
      .then(() => {
        setFetchingLocation(true)
      })
      .finally(() => {
        setFetchingLocation(false)
        console.log(location) //this prints nothing or empty on the first button click
      })
  }

按钮onClick函数绑定：

onClick={() => getLocation(143)}

我不确定发生了什么，第一次单击将什么都不会记录，但是在第二次单击时，我得到了更新的位置状态。

答案

正如评论所说，调度是异步进行的。因此，如果您想知道新值，则应使用useEffect挂钩，如下所示。

useEffect(() => {
  console.log(location)
}, [location])

您可以在此处了解更多信息：https://reactjs.org/docs/hooks-effect.html

另一答案

您可以使用useEffect来获取每次location更改的更新，以下功能将在每次位置更改时执行：

useEffect(() => {
    if(location) { // <-- Check if location is available or not
        console.log(location) //<--- Check your location here, after first click
    }
},[location]); // <--- Will check if location is changed or not , if changed call the above function