时间戳

首页 > 解决方案 > 使用 Hooks 时，React Context 更新状态未反映在嵌套函数中

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

问题描述

在我最初渲染 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;

标签： javascriptreactjsreact-hooks

解决方案

我的猜测是mainDispatch异步的。

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

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

推荐阅读