反应本机打字稿：usecontext函数不会从子组件内部触发

Question

当我尝试在 React 本机 Android 应用程序的子组件内使用上下文中的函数时遇到问题。

以下是我的上下文代码，以及我在其中使用它的表单组件（为简洁起见，已删除）。

“isFormOpen”对象可以从包含在提供程序中的任何子组件中毫无问题地读取，但是当我尝试从同一个子组件调用“toggleForm”函数时，它什么也不做，也没有控制台错误。

我有另一个上下文，它在结构和语法上是相同的，除了变量名和函数名等，而且效果很好，所以我有点困惑为什么这不起作用。我删除了其他上下文，认为可能存在某种类型的冲突，但没有解决。

AccountContext.tsx

import React, { FC, createContext, useContext, useState } from 'react';

interface AccountContextType {
    isFormOpen: boolean,
    toggleForm: (toggle: boolean) => void
};

export const AccountContext = createContext<AccountContextType>({
    isFormOpen: false,
    toggleForm: () => null
});

export const AccountContextProvider: FC = props => {
    const [formOpen, setFormOpen] = useState<boolean>(false);

    const toggleForm = (toggle: boolean) => {
        setFormOpen(toggle);
    }

    const value: AccountContextType = {
        isFormOpen: formOpen,
        toggleForm
    }

    return (
        <AccountContext.Provider value={value}>
            {props.children}
        </AccountContext.Provider>
    )
}

export const useAccountContext = () => useContext(AccountContext);

TrackUploadForm.js

import React from 'react';
import { SafeAreaView } from 'react-native';
import { Button } from 'react-native-paper';

import { useAccountContext } from '../contexts/AccountContext';
import { AccountContextProvider } from '../contexts/AccountContext';

const TrackUploadForm = () => {
    const accountContext = useAccountContext();

    return (
        <AccountContextProvider>
            <SafeAreaView>
                <Button onPress={() => accountContext.toggleForm(false)} mode='outlined'>Cancel</Button>
            </SafeAreaView>
        </AccountContextProvider>
    )
};

export default TrackUploadForm;

Answer 1

1. useAccountContext 在提供者之外被调用

export default function App() {
  return (
    <AccountContextProvider>
      <Content />
    </AccountContextProvider>
  );
}

const Content = () => {
  const accountContext = useAccountContext();
  return (
    <div className="App">
      <h1>{accountContext.isFormOpen ? "true" : "false"}</h1>
      <Button onPress={() => accountContext.toggleForm(false)} mode='outlined'>Cancel</Button>
    </div>
  );
};

1. accountContext.toggleForm(false) accountContext.toggleForm(!accountContext.isFormOpen)

我们在一起 https://codesandbox.io/s/cranky-panini-yo129