Javascript React Redux：渲染<；供应商>；内部函数App（）

我一直在尝试按照Redux文档（使用我的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);

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

进行渲染。这里的明显错误是复制粘贴错误：

返回(
{！已加载&&(
，//删除此逗号
rootElement//删除此行
)}

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

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

---

您可以通过

warn why react

等来检查，告诉您如何修复它超出了stackOverflow问题的范围，但问题不同-选项太多；）

已解决。我试图从

App.js

渲染

，而我本应该从

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();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“/reportWebVitals”导入reportWebVitals；
从“redux”导入{createStore}；
从“react redux”导入{Provider}；
从'/cart.js'导入{Counter}；
let store=createStore（计数器）；
ReactDOM.render(
,
document.getElementById（'root'））
);
ReactDOM.render(
,
document.getElementById（'root'））
);
reportWebVitals（）；

这似乎开始了递归（页面永远加载）。我已经添加了我的package.json，是否存在兼容性问题？嗯，您的

App

组件呈现了一个

App

组件。是的，这是递归；）这就是我所说的“你最初的方法是正确的”。您的package.json不一定是代码库中安装的全部。包管理器安装所有类型的东西，因为它是第三个包的依赖项，所以据我所知，您可能有20个不同的react dom版本。你真的必须使用你的包管理器提供的工具来搜索它。我的包管理器是npm。我用createreact-app命令创建了这个项目。如何检查多个已安装版本？My package.json和package-lock.json都只包含一个。您能确认您没有任何其他应用程序实例在任何地方运行吗else@ShubhamKhatri我不知道。我通过在我的项目目录中运行“npm start”来开始调试。您是否可以创建一个带有可复制错误的codesandbox？您认为应该只有这两个

ReactDOM.render

调用中的一个。将它们组合成

ReactDOM.render（，document.getElementById（'root'）
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();