Reactjs useContext在顶层声明，但值不会在另一个函数中更新

我使用myComponent顶部的useContext获取值

我有一些使用其值的公共API函数。可以随时在父组件中调用和更新useContext值。但后来在myComponent的另一个函数中，仍然使用旧值

我不能在这里使用useEffect，因为它是可以随时调用的公共API

我提供了以下示例：

在state/index.js中

import React, { createContext, useContext, useReducer } from 'react';
import reducer from 'reducers';
import PropTypes from 'prop-types';

const initialState = {
   test: true,
};

const StateContext = createContext();

const StateProvider = ({ children }) => (
 <StateContext.Provider value={useReducer(reducer, initialState)}>
  {children}
 </StateContext.Provider>
);

const useStateValue = () => useContext(StateContext);

StateProvider.propTypes = {
  children: PropTypes.any,
};

StateProvider.defaultProps = {
 children: {},
};

export { StateContext, StateProvider, useStateValue };

在reducers/index.js中

import { TEST_FALSE, TEST_TRUE } from 'actions/App';
import { isEmpty } from 'Utils';

const testReducer = (state, action) => {
  switch (action.type) {
    case TEST_FALSE:
      return {
        ...state,
        test: false,
      };
    case TEST_TRUE:
      return {
        ...state,
        test: true,
      };
    default:
      return state;
  }
};

const rootReducer = ({ test }, action) => ({
  test: testReducer(test, action),
});

export default rootReducer;

和在app.js中

import { testTrue, testFalse } from 'actions/App';

import { useStateValue } from '../state';

const App = props => {
  const [{ test }, dispatch] = useStateValue();

  const updateTestTrue = () => {
    testTrue(dispatch);
  }

  const updateTestFalse = () => {
    testFalse(dispatch);
  }

  const checkTest = () => {
    console.log('check test', test) // here it always returns initial state value even after value gets updated
  }
  return (<div>test</div>)

}
export default App;

从'actions/App'导入{testTrue，testFalse}；
从“../state”导入{useStateValue}；
const App=props=>{
const[{test}，dispatch]=useStateValue（）；
const updateTestTrue=（）=>{
testTrue（调度）；
}
const updateTestFalse=（）=>{
测试错误（发送）；
}
常量检查测试=（）=>{
console.log（'check test'，test）//这里它总是返回初始状态值，即使在值更新之后也是如此
}
返回（测试）
}
导出默认应用程序；

检查测试，更新测试假，更新测试真是示例公共API函数。稍后使用它，我将被调用并更新该值。组件正确渲染

但在checkTest函数中，它只将初始值视为true。不接受更新的值

例如，如果我通过调用updateTestFalse函数进行更新。当我调用检查测试时，仍然接受旧值

请让我知道我错过了什么？我想在checkTest函数中使用更新后的值

rootReducer

将返回initialState的

{test:false}

，但在updateTestTrue之后，它将是

{test:{test:true}

您已定义了检查测试，但从未在问题代码中调用它。如果在渲染同步代码之外调用，请参阅以获取更多详细信息

---

你必须得到一个关于你所缺少的东西的具体答案。但是猜测一下-在渲染之间（例如，从事件处理程序或在

Promise.then（）

中）会更改该值，因此将有1个渲染使用旧值，第2个渲染使用新值。您可能正在检查旧渲染中的值。。。或者你可能在适当的地方改变了某些对象/数组（这不会触发重新渲染）。@Aprillion我编辑了问题。如果发现问题，请检查并告知我。实际上，我正在iframe中加载我的应用程序，并试图将公共事件绑定到iframe。因此，它不是将当前值用于“测试”。在使用此函数绑定事件侦听器后，它将正常工作。谢谢

import { TEST_FALSE, TEST_TRUE } from 'actions/App';
import { isEmpty } from 'Utils';

const testReducer = (state, action) => {
  switch (action.type) {
    case TEST_FALSE:
      return {
        ...state,
        test: false,
      };
    case TEST_TRUE:
      return {
        ...state,
        test: true,
      };
    default:
      return state;
  }
};

const rootReducer = ({ test }, action) => ({
  test: testReducer(test, action),
});

export default rootReducer;

import { testTrue, testFalse } from 'actions/App';

import { useStateValue } from '../state';

const App = props => {
  const [{ test }, dispatch] = useStateValue();

  const updateTestTrue = () => {
    testTrue(dispatch);
  }

  const updateTestFalse = () => {
    testFalse(dispatch);
  }

  const checkTest = () => {
    console.log('check test', test) // here it always returns initial state value even after value gets updated
  }
  return (<div>test</div>)

}
export default App;