一个上下文消费者被渲染了多个孩子，或者一个不是函数的孩子答案

【问题标题】：A context consumer was rendered with multiple children, or a child that isn't a function一个上下文消费者被渲染了多个孩子，或者一个不是函数的孩子
【发布时间】：2022-12-23 20:09:04
【问题描述】：

完整的错误说：

一个上下文消费者被渲染了多个孩子，或者一个不是函数的孩子。上下文消费者需要一个作为函数的子对象。如果您确实传递了一个函数，请确保它周围没有尾随或前导空格。

我在这里阅读了几个解决方案，但没有一个对我有用。这是我的代码：

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);
...
}

先感谢您！

【问题讨论】：

标签： reactjs react-hooks react-context

【解决方案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);
    ...
}

【讨论】：

【解决方案2】：

在 main.jsx 中，您应该将 App 组件包装在 TransactionProvider 中，而不是 TransactionContext：

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

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

【讨论】：