<Provider> 中的错误 - 检查 `Provider` 的渲染方法。反应还原

Posted 2023-02-22

【中文标题】<Provider> 中的错误 - 检查 `Provider` 的渲染方法。反应还原

【英文标题】：Error in <Provider> - Check the render method of `Provider`. react-redux

【发布时间】：2019-06-08 19:07:32

【问题描述】：

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 导入的类，所以请帮我解决这个问题，我在过去两天遇到的这个问题无法解决。

【问题讨论】：

您的app.js 是否正确导出了您尝试在Provider 中渲染的组件？

你能告诉我们App类和商店吗？

我正在为完全相同的问题寻求帮助（也许学习 Max 的相同教程）。我没有组合减速器。

请参考图片是否有错误。我在控制台中打印了 Store 和 Provider 值。 i.stack.imgur.com/5AwvS.png

我猜你已经升级了 react 版本。你还需要升级 react-dom，它会解决这个问题。

【参考方案1】：

我认为您的问题在于您传入的减速器。 你有没有使用 combineReducers 函数来组合你的 reducer？

import  createStore, combineReducers  from "redux";


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

Working sandbox example

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

【讨论】：

我有同样的问题，没有组合减速器： import * as actions from '../actionNames';常量初始状态 = 人： [] ; const reducer = ( state = initialState, action ) => switch ( action.type ) case actions.ADD_PERSON: console.log( actions.ADD_PERSON );返回状态；案例actions.DELETE_PERSON：console.log（actions.DELETE_PERSON）；返回状态；默认：返回状态； ; ;导出默认减速器；

@user2775366 我还没有解决方案，如果有我会尽快分享

我已经更新了问题，请大家去看看。用同样的@varoons 帮助我

【参考方案2】：

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

【讨论】：

他的版本确实有效，所以我们在处理商店时遗漏了一些东西，很可能来自该州的联系人数据，这些数据要么在讲座中遗漏，要么在语言更新中丢失。如果你想练习的话，我会专注于 redux 存储研究的调试，但我将使用他并学习部署，然后专注于学习 react/redux 流程的语言实现，并在之后进行调试。

【参考方案3】：

与以前的代码和新的 React 或 Redux 版本不兼容。 在我降级安装的工具之前，我遇到了这个问题，请参阅所比较的 package.json 文件的附件图像。 我不知道哪个文件是罪魁祸首。 屏幕右侧的阵容可以正常工作，而另一个我无论做什么都会出错。 版本差异以黄色背景突出显示。 我猜（未经测试）问题源于 react 和 react-dom 包之间的版本差异。

Victor Nunes 建议的解决方案是：

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

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

【讨论】：

您在上面列出的npm install 命令为我解决了这个问题（没有删除任何内容）.. 在我的情况下似乎有些依赖项未对齐！谢谢！！！我已经尝试过重新安装除了 react-dom 和 react-scripts 之外的所有东西，所以其中一个是我的罪魁祸首。

另外，指向您找到此信息的位置的链接对于某些上下文会有所帮助！

@Paul 抱歉，我无法链接，信息来自我正在学习的 React 课程，而且它不是免费的。