使用 Hooks 时，React Context 更新状态未反映在嵌套函数中答案

【问题标题】：React Context updated state not reflecting in nested functions when using Hooks使用 Hooks 时，React Context 更新状态未反映在嵌套函数中
【发布时间】：2020-07-26 09:43:48
【问题描述】：

我在初始渲染 React 组件期间显示了两个按钮。如果我单击主要按钮。相关的 onClick 函数将调度一个事件来更新 reducer 状态，然后执行再次打印状态的嵌套函数。

我面临的问题是更新后的状态没有反映在嵌套函数。你能告诉我我在这里缺少什么吗？

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;

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

我的猜测是 mainDispatch 是异步的。

您也许可以通过以下方式检查更改：

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

【讨论】：

感谢您的回复。我已经在 useEffect Hook 中添加了主要状态。更新状态值没有进入嵌套函数。