反應-導出上下文提供程序給我錯誤：“元素類型無效：應為字符串[…]，但得到：未定義”

Question

摘要

我有一個文件，可在其中使用React Context Provider創建組件，並將其導出到另一個文件（請參見代碼）。 但是導入時給我一個錯誤。

已經嘗試了導入文件的其他方法。 但是得到同樣的錯誤。 在組件中記錄導入的Provider，表明它存在。

碼

導出的文件

function PositionContextProvider({ children }) {
  return <EditModeContext.Provder value={false}>{children}</EditModeContext.Provder>;
}

export { PositionContextProvider };

進口

import { PositionContextProvider } from './PositionContext';

[...]

function Application() {
  return (
   <ContextQuery query={getPositions}>
    {({ data, loading, fetchMore, isFetchingMore }) => {
      return (
        <PositionContextProvider>
          ...
        </PositionContextProvider /> 
      )
    })}
   </ContextQuery />
  )
}

期望能夠在Provider中的任何組件中使用上下文，但會在控制台中獲得錯誤消息。

不變違規：元素類型無效：預期為字符串（對於內置組件）或類/函數（對於復合組件），但得到：未定義。 您可能忘記了從定義文件中導出組件，或者可能混淆了默認導入和命名導入。

Answer 1

將函數分配給變量，然后將其導出：

const PositionContextProvider = function({ children }) {
  return <EditModeContext.Provder value={false}>{children}</EditModeContext.Provder>;
}

export { PositionContextProvider };

Answer 2

錯字：提供商中缺少“ i”。