Javascript 使用React反冲时出现错误

我只是想学一下反冲。遇到以下问题

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

只需遵循本图坦卡蒙中提到的步骤

尝试了下面的溢出帖子中提到的任何内容 不走运

从“React”导入React；
从“/TextInput”导入TextInput；
从“./CharacterCount”导入CharacterCount；
函数字符计数器（）{
返回(
);
}
导出默认字符计数器；

从“React”导入React；
从“反冲”导入{useRecoilState}；
从“./atom”导入{textState}；
函数TextInput（）{
const[text，setText]=useRecoilState（textState）；
const onChange=（事件）=>{
setText（event.target.value）；
};
返回(


回声：{text}
);
}
导出默认文本输入；

从“React”导入React；
从“反冲”导入{useRecoilValue}；
从“./selector”导入{charCountState}；
导出函数CharacterCount（）{
const count=useRecoilValue（charCountState）；
返回（字符计数：{Count}）；
}
导出默认字符数；

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

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'的渲染方法。
▶ 20个烟囱框架倒塌。
模块../src/index.js
D:/Mohan/Projects/2020/Experiments/Recoil/Recoil-example/src/index.js:8
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
ReactDOM.render(
,

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

---

从“recoil”导入{RecoilRoot}；

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

---

从“recoil”导入{RecoilRoot}；

你能在沙箱中复制吗？（）你能在沙箱中复制吗？（）

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