Обновленное состояние React Context не отражается во вложенных функциях при использовании хуков

Question

Я отобразил две кнопки во время моего начального рендеринга реагирующего компонента. Если я нажал на кнопку основной. соответствующая функция onClick отправит событие для обновления состояния редуктора, а затем выполнит вложенную функцию, которая снова печатает состояние.

Проблема, с которой я столкнулся, заключалась в том, что обновленное состояние не отражено во вложенных функциях. Не могли бы вы дать мне знать, что мне здесь не хватает?

import React, { useEffect, useContext } from "react";
import { MainContext } from "../Main/Main";

// Main
function FirstTab() {
  // // Access Context
  const { mainState, mainDispatch } = useContext(MainContext);
  const filterState = mainState.filter;
  console.log("AppMainState->SalesTab:", filterState);

  const updateFilterContext = (data) => {
    console.log("Inside Filter Update:", data);
    mainDispatch({ type: "UPDATE_FILTER", data: data });
  };

  //ss
  const PrimaryClick2 = (filterState) => {
    console.log("Primary Click2");
    console.log("AppMainState->PrimaryClick2:", filterState);
  };

  const PrimaryClick1 = (filterState) => {
    console.log("Primary Click1");
    console.log("AppMainState->PrimaryClick1:", filterState);
    PrimaryClick2(filterState);
  };

  const PrimaryClick = (filterState) => {
    console.log("Primary Click");
    console.log("AppMainState->PrimaryClick:", filterState);
    updateFilterContext({ selectedValue: "NEWVALUE" });
    PrimaryClick1(filterState);
  };

  useEffect(() => {
    console.log("Step1: Generating First Tab");
  }, [mainState.filter.applyFilter]);

  return (
    <div>
      <div>
        <button class="ui primary button" onClick={PrimaryClick}>
          Primary
        </button>
        <button class="ui secondary button">Secondary</button>
      </div>
    </div>
  );
}
export default FirstTab;

Answer 1

Я предполагаю, что mainDispatch является асинхронным.

Вы можете проверить наличие изменений с помощью:

useEffect(() => {
  console.log('mainState changed')
  console.log(mainState.filter)
}, [mainState])