Состояние реакции не обновляется после вызова диспетчеризации с использованием хука React useContext

Question

Ура, ребята, здесь новичок в 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)}

Я не уверен, что происходит, при первом щелчке ничего не регистрируется, но при втором щелчке я получил обновленное состояние местоположения.

Answer 1

Как говорится в комментариях, рассылка работает асинхронно. Итак, если вы хотите узнать новое значение, вам следует использовать хук useEffect, подобный этому.

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

Подробнее об этом можно прочитать здесь: https://reactjs.org/docs/hooks-effect.html