一個上下文消費者被渲染了多個孩子，或者一個不是函數的孩子

Question

完整的錯誤說：

一個上下文消費者被渲染了多個孩子，或者一個不是函數的孩子。 上下文使用者期望一個作為函數的子項。 如果您確實傳遞了一個函數，請確保它周圍沒有尾隨或前導空格。

我在這里閱讀了幾個解決方案，但沒有一個對我有用。 這是我的代碼：

TransactionsContext.jsx

export const TransactionContext = React.createContext();

export const TransactionProvider = ({ children }) => {
    return (
        <TransactionContext.Provider value='test'>
            { children }
        </TransactionContext.Provider>
    );
}

主.jsx

import { TransactionContext } from './context/TransactionsContext';

ReactDOM.render(
  <TransactionContext>
    <App />
  </TransactionContext>,
  document.getElementById('root')
)

應用程序.jsx

const App = (props) => {
  return (
    <div className="min-h-screen">
      <div>
        <Navbar />
        <Welcome />
      </div>
      <Services />
      <Transactions />
      <Footer />
    </div>
  )
}

歡迎.jsx

const Welcome = () => {

const { value } = useContext(TransactionContext);
console.log(value);
...
}

先感謝您！

Answer 1

在 TransactionsContext.jsx 上發送對象而不是字符串

<TransactionContext.Provider value={{value: 'test'}}>

一旦創建了上下文，它就從上下文提供者開始。

替換提供者 main.jsx 的上下文

import { TransactionProvider } from './context/TransactionsContext';

ReactDOM.render(
  <TransactionProvider>
    <App />
  </TransactionProvider>,
  document.getElementById('root')
);

然后在 Welcome.jsx 上使用上下文

const Welcome = () => {
    const { value } = useContext(TransactionContext);
    console.log(value);
    // or
    // const tc = useContext(TransactionContext);
    // console.log(tc.value);
    ...
}

Answer 2

在main.jsx中，您應該將App組件包裝在TransactionProvider中，而不是TransactionContext中：

import { TransactionProvider } from './context/TransactionsContext';

ReactDOM.render(
  <TransactionProvider>
    <App />
  </TransactionProvider>,
  document.getElementById('root')
)