0

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

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

只需按照本文中提到的步骤 https://blog.logrocket.com/simple-state-management-recoil/

尝试了以下溢出帖子中提到的任何内容 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;

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

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

1 回答 1

3

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

import { RecoilRoot } from 'recoil';

于 2020-08-29T08:42:33.830 回答