使用React Recoil时弹出错误

如何解决使用React Recoil时弹出错误

我只是想学习React Recoil。并遇到以下问题。

错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象

只需遵循本教程中提到的步骤 https://blog.logrocket.com/simple-state-management-recoil/

尝试了以下溢出帖子中提到的任何内容 https://www.dropbox.com/s/paosp6iom9oks9p/InnerViewPropBind.zip 没有运气！

import React from 'react';
import RecoilRoot from 'recoil';
import CharacterCounter from './CharacterCounter';
import './App.css';


function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>

  );
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

import { atom } from 'recoil';

export const textState = atom({
    key: 'textState',// unique ID (with respect to other atoms/selectors)
    default: '',// default value (aka initial value)
});

import { selector } from 'recoil';
import { textState }  from './atom';

export const charCountState = selector({
    key: 'charCountState',// unique ID (with respect to other atoms/selectors)
    get: ({ get }) => {
        const text = get(textState);

        return text.length;
    },});

import React from 'react';

import TextInput from './TextInput';
import CharacterCount from './CharacterCount';

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

export default CharacterCounter;

import React from 'react';
import { useRecoilState } from 'recoil';
import { textState }  from './atom';

function Textinput() {
    const [text,setText] = useRecoilState(textState);

    const onChange = (event) => {
        setText(event.target.value);
    };

    return (
        <div>
            <input type="text" value={text} onChange={onChange} />
            <br />
        Echo: {text}
        </div>
    );
}

export default TextInput;

import React from 'react';
import { useRecoilValue } from 'recoil';
import { charCountState } from './selector';

export function CharacterCount() {
    const count = useRecoilValue(charCountState);

    return (<div>Character Count: {count}</div>);
}

export default CharacterCount;

问题：错误：元素类型无效：应使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。

Check the render method of `App`.
▶ 20 stack frames were collapsed.
Module../src/index.js
D:/Mohan/Projects/2020/Experiments/Recoil/recoil-example/src/index.js:8
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   
     <App />,

解决方法

App.js中的RecoilRoot导入应为：

import { RecoilRoot } from 'recoil';