React Context 更新 state 在使用 Hooks 时没有反映在嵌套函数中

Question

I have displayed two buttons during my initial render of the react component. If i clicked on button primary. the relevant onClick function will dispatch an event to update the reducer state and then executes the nested function which again prints state.

The problem I am facing was the updated state is not reflecting in the nested functions. Could you let me know what I am missing here?

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

My guess is that mainDispatch is asynchronous.

You might be able to check for changes with this:

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