Question

Context.js

const GlobalContext = React.createContext();

const initState = {count:0};

const GlobalContextProvider = props => {
    const [state, setState] = useState(initState);

    return (
        <GlobalContext.Provider value={{state:state, setState:setState}}>
            {props.children}
        </GlobalContext.Provider>
    )
};

const GlobalContextValue = useContext(GlobalContext)

export {GlobalContextValue, GlobalContextProvider}

当我导出GlobalContextValue时，Chrome或React抛出错误，表明这是无效的钩子调用，但我希望能够在如下所示的模块中使用setState。

fetchAPI.js

import { GlobalContextValue } from './GlobalContext';

const {state, setState} = GlobalContextValue;

function load() {
    fetch('localhost:8000/load')
    .then(res => res.json())
    .then(json => setState(json));
};

Answer 1

您不能在React功能组件之外使用钩子。

您也许可以用另一种方式来做。

免责声明：尽管我不建议完全这样做，但我并未测试此代码，但它应该可以满足您的要求。

const GlobalContext = React.createContext();

const globalState = { count: 0 }
let subscribers = []

export function setGlobalState(value) {
  Object.assign(globalState, value)
  subscribers.forEach(f => f(globalState))
}

export function subscribe(handler) {
  subscribers.push(handler)
  return () => {
    subscribers = subscribers.filter(s => s !== handler)
  }
}

const GlobalContextProvider = props => {
  const [state, setState] = useState(globalState)
  useEffect(() => subscribe(setState), [])

  return (
    <GlobalContext.Provider value={{ state: state, setState: setGlobalState }}>
        {props.children}
    </GlobalContext.Provider>
  );
};

反应导出useContext导致错误

1 个答案: