React 错误，当我在孩子中使用 Redux 连接时发生，如何绕过？对象作为 React 孩子无效

Question

这是一个错误：

对象作为 React 子对象无效（发现：object 带有键 {$$typeof, type, compare, WrappedComponent}）。 如果您打算渲染一组子项，请改用数组。

如果我不在 main.js 中使用 connect 并且在 App.js 中使用 connect 不会产生错误，它工作得很好，但是一旦我在 main.js 中使用 connect 它就会抛出这个错误。 我做错了什么？ 我正在使用与 App.js 中相同的方式连接 谢谢

这里是沙盒 https://codesandbox.io/s/busy-euler-7mpi7?file=/src/main.js

您可以体验一下，只需删除 main.js 中的 connect 即可开始工作

应用程序.js

import React, { useEffect } from "react";
import './styles/main.scss';
import './App.scss';

import routes from "./router/router";

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { connect } from "react-redux";

import {checkUser, fetchUsers, fetchPolls} from "./store/index";


function App (props) {
    useEffect(() => {
        let { loadUsers} = props
        loadUsers();
    }, [])

    let jsxRoutes = routes.map(el =>
        <Route
            path={el.url}
            exact={el.exact}
            key={el.url}>
            { el.component }
        </Route>
            )
    return (
            <Router>
                <div className="App">
                    <Switch>
                        { jsxRoutes }
                    </Switch>
                </div>
            </Router>
    );
}

const mapStateToProps = state => {
    return {
        users: state.users.data,
    }
}

const mapDispatchToProps = dispatch => {
    return {
        loadUsers: () => dispatch(fetchUsers())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

主.js

import React from "react";
import "./main.scss"

import { connect } from "react-redux"


const Main = (props) => {
    return(
        <main>
            main pg
        </main>
    )
}



export default connect(null, null)(Main);

Answer 1

在App.js 中试试这个：

let jsxRoutes = routes.map((el) => (
  <Route path={el.url} exact={el.exact} key={el.url} component={el.component} />
));

或者更短的版本： <Route {...el} />