<provider>中的错误-检查提供者的渲染方法。 react-redux

时间:2019-01-14 18:58:00

标签: redux react-redux redux-thunk redux-saga react-router-redux

enter image description here enter image description here

代码:这是我的index.js文件

index.js

    import { Provider } from "react-redux";
    import { createStore } from 'redux';

    import App from './app';

    import reducer from './store/reducer';

    const store = createStore(reducer);
    console.log("Store ..."+store);
    console.log(Provider);

    ReactDOM.render((
      <Provider store={store}>
        <App/>
      </Provider>
    ), document.getElementById('root'));

代码:这是我的reducer.js文件

    reducer.js
    import * as actionTypes from './actions';

    const initialState = {
    assistants:[],
    fetchInProgress:true
    }

    const reducer = (state = initialState, action) =>{

    return state;
    };

    export default reducer;

代码:这是我的app.js文件     app.js

class App extends Component{
render(){
return(
  <HashRouter>
    <Switch>
    <Route exact path="/login" name="Login Page" component={Login}/>
    <Route exact path="/register" name="Register Page" component= 
    {Register}/>
    <Route exact path="/404" name="Page 404" component={Page404}/>
    <Route exact path="/500" name="Page 500" component={Page500}/>
    <Route path="/" name="Home" component={Full}/>
    </Switch>
  </HashRouter>
  );
 }
 }

 export default App;

错误:未捕获的错误:元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到了:对象。

检查Provider的呈现方法。

请参考两个图片以获取错误信息。我收到错误消息,请检查您的提供程序组件渲染方法,但这不是我要更改的提供程序渲染方法。因为它是从redux导入的类,所以请帮助我解决这个问题,最近两天我都无法解决。

4 个答案:

答案 0 :(得分:5)

与先前的代码以及新的React或Redux版本不兼容。
我遇到了这个问题,直到我降级了已安装的工具,然后才看到了package.json文件的附件图像。
enter image description here 我不知道是哪个文件。
通过屏幕右侧的选单,它可以工作,而另一个选单,无论我做什么,都会出现错误。
版本差异以黄色背景突出显示。
我猜(未经测试),问题源于react和react-dom软件包之间的版本差异。

Victor Nunes建议的解决方案是:

  1. 删除package-lock.json文件和node_modules文件夹
  2. 删除package.json上所有“依赖项”内容
  3. 运行npm install --save react react-dom react-redux react-scripts redux

除了上面列出的软件包之外,您可能还需要安装其他软件包。

答案 1 :(得分:0)

我认为您的问题在于所传递的减速器。 您是否使用过CombineReducers功能来组合减速器?

import { createStore, combineReducers } from "redux";


const store = createStore(combineReducers({ 
    //...all your reducers 
}));

Working sandbox example

与您的代码进行比较。也许从删除所有路线开始。问题可能在那里

答案 2 :(得分:0)

最大概率相同从Google的404开始。你们也从锁定文件中得到了安全隐患吗?不确定如何将锁定文件版本更改为灵活。

答案 3 :(得分:0)

我尝试导入thunk来解决数据类型问题,但这不是解决方案。