使用 React Recoil 时弹出错误

Question

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

错误：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：对象

只是按照本教程中提到的步骤进行操作 https://blog.logrocket.com/simple-state-management-recoil/

尝试了下面溢出中提到的任何内容 post https://blog.logrocket.com/simple-state-management-recoil/ 运气不好！

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;

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

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 />
   ,

Answer 1

App.js 中的 RecoilRoot 导入应该是：

import { RecoilRoot } from 'recoil';

使用 React Recoil 时弹出错误

There is an error popping up while using React Recoil

javascript

reactjs

recoiljs