React-Redux：<Provider>在函数 App() 中渲染

Question

我一直试图按照Redux文档中的指示将我的整个App()包装在<Provider>中(使用我的Redux存储(，如下所示：

import './App.css';
import MenuItems from './components/Navbar/MenuItems';
import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import { createStore } from 'redux';
import {AddItemToCart, DeleteItemFromCart, Counter} from './cart.js';
import Header from './header';
import Footer from './footer.js';
import { render } from "react-dom";
import { Provider } from "react-redux";
import { useSelector, useStore } from 'react-redux';
let store = createStore(Counter);
const rootElement = document.getElementById("root");
render(
<Provider store={store}>
<App />
</Provider>,
rootElement
);
function App() {
const [selectedItem, setSelectedItem] = useState()
const [products, setProducts] = useState([])
const [isLoaded, setStateToLoaded] = useState(false)
const [isLoading, setIsLoading] = useState(false);
const [customerInfo, setCustomerInfo] = useState([]);
const state = useSelector((state) => state);
const cartContentsJSON = JSON.stringify(state);

这给了我一个错误：

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

此错误在启动后立即导致应用程序崩溃。删除最后一行的useSelector()后，错误消失，但应用程序将无法工作。我怀疑这是因为我使用React DOM来渲染<Provider>，我可能不应该使用它，因为我使用的是function App()？所以我试着在function App()中添加<Provider>，如下所示：

function App() {
const [selectedItem, setSelectedItem] = useState()
const [products, setProducts] = useState([])
const [isLoaded, setStateToLoaded] = useState(false)
const [isLoading, setIsLoading] = useState(false);
const [customerInfo, setCustomerInfo] = useState([]);
const state = useSelector((state) => state);
const cartContentsJSON = JSON.stringify(state);
return (
<div className="App">
<div className="content">
{!isLoaded && (
<Provider store={store}>
<App />
</Provider>,
rootElement
)}

然而，这给了我另一个错误信息：

Error: Objects are not valid as a React child (found: [object HTMLDivElement]). If you meant to render a collection of children, use an array instead.

最奇怪的是，有时保存我的编辑后一切都正常，但如果我刷新页面，就会停止工作，这在使用Redux时经常发生。我做错了什么？如有任何建议，将不胜感激

我的package.json，是否可能存在兼容性问题？

"dependencies": {
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.3",
"@testing-library/user-event": "^12.6.2",
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"crypto": "^1.0.1",
"mysql": "^2.18.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-scripts": "4.0.1",
"redux": "^4.0.5",
"web-vitals": "^0.2.4"
},

编辑：问题解决了。我尝试从App.js进行渲染，而本应从index.js进行渲染。

Answer 1

这里的明显错误是复制&粘贴一个：

return (
<div className="App">
<div className="content">
{!isLoaded && (
<Provider store={store}>
<App />
</Provider>,    // remove this comma
rootElement     // remove this line
)}

但这本身并不能解决你的问题。就像你最初展示的那样渲染它应该是可能的。

您的问题最常见的原因是同时安装了多个版本的react、react redux或react dom。

你可以通过yarn why react等进行检查。告诉你如何修复它有点超出了stackOverflow问题的范围，但有一个不同的问题——选项太多了；(

Answer 2

已解决。我试图从App.js渲染<Provider>，而我本应该从index.js渲染。以下是我的index.js现在的样子：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { createStore } from 'redux';
import { Provider } from "react-redux";
import { Counter } from './cart.js';
let store = createStore(Counter);
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
reportWebVitals();