在 next.js 中使用 typescript 将状态从 _app 传递到页面答案

【问题标题】：Passing state from _app to pages with typescript in next.js在 next.js 中使用 typescript 将状态从 _app 传递到页面
【发布时间】：2022-07-22 21:19:28
【问题描述】：

我想在一个页面中设置一个状态，然后在另一个页面中访问。我的解决方案是在_app.tsx 中创建状态，然后将其传递到每个页面。

我的理解是我可以像这样在_app.tsx 创建状态

function MyApp({ Component, pageProps }: AppProps) {
  const [accessToken, setAccessToken] = useState('')
  return (
    <ApolloProvider client={apolloClient}>
      <Component
        {...pageProps}
        setAccessToken={setAccessToken}
        accessToken={accessToken}
      />
    </ApolloProvider>
  )
}

然后如何访问我的页面中的 state 和 setState 函数？我试过了

const Home: NextPage = ({setAccessToken}) => { 
...}

但我得到了错误：Property 'setAccessToken' does not exist on type '{ children?: ReactNode; }'.ts(2339)

如何读取我在_app.tsx 中设置的状态？还是我做错了，应该只使用 redux？

【问题讨论】：

标签： typescript redux next.js use-state

【解决方案1】：

这是一个typescript 错误，表示Component 不需要属性setAccessToken。您可以通过更新/扩展AppProps 中的Component 接口来消除此错误。顺便说一句，您尝试做的与React.Context API 非常相似。我建议使用它而不是自己做。这样做你会得到很多好处，比如不必一直发送 props 来获取/设置深度嵌套的子组件的值。

【讨论】：