上下文使用者使用多个 children 或不是函数的 child 呈现

Question

完整的错误说：

上下文使用者使用多个 children 或不是函数的 child 呈现。上下文消费者期望单个 child 是一个函数。如果您确实传递了一个函数，请确保它周围没有尾随或前导空格。

我在这里阅读了几个解决方案，其中 none 为我提供了一个解决方案。这是我的代码：

在TransactionsContext.jsx

export const TransactionContext = React.createContext();

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

在main.jsx

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

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

在App.jsx

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

在Welcome.jsx

const Welcome = () => {

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

先谢谢你了!!!!!!!

Answer 1

发送一个对象而不是字符串 TransactionsContext.jsx

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

创建上下文后，它将开始 with the context provider。

替换提供商的上下文 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')
)

上下文使用者使用多个 children 或不是函数的 child 呈现

A context consumer was rendered with multiple children, or a child that isn't a function

reactjs

react-hooks

react-context