如何修复未捕获的对象:TypeError(...)将Redux连接到项目时不是函数错误

Question

我第一次看到这个问题，任何谷歌都不能帮助我(我不知道它是什么，很长一段时间我都在做同样的事情，一切都很好，什么都不能理解

我的代码如下所示：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./style/main.scss";
import { Provider } from "react-redux";
import reducers from "./reducers/index";
import { createStore } from "redux/es/redux";

const store = createStore(reducers);

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

我的错误看起来是：

index.js:1375 The above error occurred in the <Provider> component:
    in Provider (at index.js:12)

Consider adding an error boundary to your tree to customize error handling behavior.

还有一个错误：

Uncaught TypeError: Object(...) is not a function
    at Provider (Provider.js:10)
    at mountIndeterminateComponent (react-dom.development.js:13922)
    at beginWork (react-dom.development.js:14376)
....

我的包-json：

{
  "name": "interview-question",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "3.0.1"
  },
  "dependencies": {
    "date-fns": "^1.28.0",
    "faker": "^4.1.0",
    "node-sass": "^4.12.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-loader-spinner": "^3.1.4",
    "react-spinners": "^0.6.1",
    "redux": "^4.0.1",
    "react-redux": "^7.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

REDUCER index.js：

import { combineReducers } from "redux";
import data from "./data";

const reducers = combineReducers({
  data
});

export default reducers;

data.js：

const INITIAL_STATE = {
  time: undefined,
  products: undefined
};

export default (state = INITIAL_STATE, { type, payload }) => {
  switch (type) {
    case "PRODUCTS_WAS_RECIEVED": {
      return {
        ...state,
        products: payload
      };
    }
    case "TIME_WAS_RECIEVED": {
      return {
        ...state,
        time: payload
      };
    }
    default:
      return state;
  }
};

也许有人知道如何修复它？非常感谢!

Answer 1

请尝试使用更高版本的react和react-dom。最好还是在package.json中使用以下代码

"react": "next",
"react-dom": "next"

然后使用yarn upgrade或npm update更新依赖项。