ReactJS 错误是\"This component must be used inside a <RecoilRoot> component.\"答案

【问题标题】：ReactJS error is "This component must be used inside a <RecoilRoot> component."ReactJS 错误是\"This component must be used inside a <RecoilRoot> component.\"
【发布时间】：2022-12-22 08:01:53
【问题描述】：

但我稍微扭曲了它，我没有布局，而是我想添加到页眉的每页组件。

我收到以下错误：

帐户.jsx看起来像这样：

import { useRecoilValue } from "recoil";
import { userProfile } from "../../../recoil";

export default function Account() {
    const profile = useRecoilValue(userProfile);

    return (
        <div className="w-screen h-full ">
            <header>
                <Navbar profile={dataMe} />
            </header>
            <main className="h-screen relative">
                <div className='h-screen flex bg-gray-bg my-15 static'>
                    <div className='w-full mt-10 m-auto bg-white rounded-lg border'>
                        <div>
                            <div>
                                <dataMe />
                            </div>

                            <DetailAccount />
                        </div>
                    </div>
                </div>
            </main>
        </div >
    );
};

【问题讨论】：

你能提供回购的链接吗？
您是在 <RecoilRoot> 组件中使用它吗？
你能分享你的 App.js 或 App.jsx 文件吗？
答案是否解决了您的问题？

标签： reactjs next.js state recoiljs

【解决方案1】：

要使用 Recoil (React 的状态管理库) 正确您必须添加 RecoilRoot 包装组件。正如我们在文档中所读：

使用反冲状态的组件需要RecoilRoot出现在某处在父树中。放置它的好地方是在你的根组件中

例子从官方docs
import React from 'react';
import Account from './Account.jsx';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <ComponentsThatUseRecoilState />
      {/* in Your case <Account /> component */}
    </RecoilRoot>
  );
}

【讨论】：

【解决方案2】：

如果您希望组件使用 Recoil 功能，则必须将组件包装在 RecoilRoot 中。截至文档：https://recoiljs.org/docs/api-reference/core/RecoilRoot/

因此，在使用 useRecoilValue 钩子之前，您必须将代码包装在 <RecoilRoot> 中。

例子：

import {RecoilRoot} from 'recoil';

function AppRoot() {
  return (
    <RecoilRoot>
      <ComponentThatUsesRecoil />
    </RecoilRoot>
  );
}

建议在根目录（App.tsx 或您的根元素的名称）上使用它，这样您的所有其他组件都可以按预期使用 Recoil 挂钩，而不必每次都将您的组件包装在 RecoilRoot 中。

【讨论】：