使用初始值而不是usestate中的上下文API

Question

我刚刚开始与React一起使用TypeScript，并尝试与Typescript处理ContextApi。 到目前为止，我已经设置了一个上下文，并尝试在我的app.tsx中使用提供商。 我的上下文文件看起来像这样：

import { createContext, ReactNode, useState } from "react";

type props = {
 children: ReactNode
}

type GlobalContextType = {
  currentValue: number;
  setCurrentValue: (value: number) => void;
}

const INITIAL_VALUE = {
  currentValue: 1,
  setCurrentValue: () => {},
}

export const GlobalContext = createContext<GlobalContextType>(INITIAL_VALUE); 

export const GlobalProvider = ({ children }: props) => {
  const [currentValue, setCurrentValue] = useState(3);

  return(
    <GlobalContext.Provider value={{ currentValue, setCurrentValue }}>
      { children }
    </GlobalContext.Provider>
  )
}

虽然我的app.tsx文件看起来像这样：

import './App.css';
import { useContext } from 'react';
import { GlobalContext, GlobalProvider } from './ContextAPI/GlobalContext';


function App() {
  const { currentValue, setCurrentValue } = useContext(GlobalContext);
  return (
    <GlobalProvider>
      <h1>{ currentValue }</h1>
      <button onClick={() => setCurrentValue(currentValue + 1)}>Increment</button>
    </GlobalProvider>
  );

}

export default App;

很少有事情没有我预期的。 首先：当我转到我的本地主机页面时，它会显示iNITAL值，即1，而不是 我使用usestate（3）设置的一个。 第二：当我单击按钮时，它不会更新值。

我想我一直在使用初始状态价值，而不是我想在提供商内设置的状态值。

Answer 1

尝试在上下文API中设置函数增量，然后在OnClick事件之后直接在应用程序中调用它