函數作為 React 子級無效。 如果您返回 Component 而不是<component />從渲染。 在反應 v6

Question

你好，我是新手，我被困在這里，我的版本是 v6，因此理解有點問題，我正在學習 udemy 的教程

發生的錯誤是 - 函數作為 React 子項無效。 如果您返回一個組件而不是從渲染中返回，則可能會發生這種情況。 或者，也許您打算調用此 function 而不是返回它。

這是在我的 Home.js 中

 class Dashboard extends Component { constructor(props) { super(props); this.state = { child: props.nestedRoute, search: "", }; } componentDidMount() { this.activeNav(); } activeNav() { const pathname = window.location.pathname; const possibleRoutes = [ { routes: "/dashboard", targetId: "home" }, { routes: "/addProduct", targetId: "addProduct" }, { routes: "/products", targetId: "products" }, { routes: "/profile", targetId: "profile" }, ]; possibleRoutes.forEach(({ route, targetId }) => { window.jQuery(`#${targetId}`).removeClass("active"); if (route === pathname) { window.jQuery(`#${targetId}`).addClass("active"); } }); } render() { const Child = this.state.child console.log(Child) const { user } = this.props.auth; return ( <div id="content-wrapper" className="d-flex flex-column"> <div id="content"> <nav className="navbar navbar-expand navbar-light bg-white topbar mb-44 static-top shadow"> <ul className="navbar-nav ml-auto"> <li className='nav-item dropdown no-arrow'> <Link className="nav-link dropdown-toggle" to="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > <span className="mr-2 d-none d-lg-inline text-gray-600 small"> {user.name} </span> <Avatar size={40}> {user.name && this.avatarText(user.name)} </Avatar> </Link> <div className="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown" > <Link className="dropdown-item" to="#"> <i className="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i> Profile </Link> <Link className="dropdown-item" to="#"> <i className="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i> Settings </Link> <Link className="dropdown-item" to="#"> <i className="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i> Activity Log </Link> <div className="dropdown-divider"></div> <Link className="dropdown-item" to="#" onClick={this.logUserOut} > <i className="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i> Logout </Link> </div> </li> </ul> </nav> <Child {...this.props} search={this.state.search} /> </div> </div> ); } } Dashboard.propTypes = { auth: PropTypes.object.isRequired, logout: PropTypes.func.isRequired, }; const mapStateToProps = (state) => ({ auth: state.auth, }); export default connect(mapStateToProps, { logout })(Dashboard);

我的 App.js 看起來像這樣

 function App(props) { useEffect(() => { store.dispatch(setCurrentUser()) }, []) return ( <Provider store={store}> <Router> <Routes> <Route exact path="/" element={<Landing/>} /> <Route exact path="/" element={<ProtectedRoute/>}> <Route exact path="/dashboard" element={()=> (<Dashboard {...props} nestedRoute={Home} />)} /> <Route exact path="/dashboard/addProduct" element={()=> (<Dashboard {...props} nestedRoute={AddProduct} />)} /> </Route> <Route exact path="/register" element={<Register/>} /> <Route exact path="/login" element={<Login/>} /> </Routes> </Router> </Provider> ); }

Answer 1

在這一行 <Child {...this.props} search={this.state.search} /> 你是否為此導入了子組件