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} />