Reactjs：無法訪問無狀態組件中的 props 值

Question

我想從我的無狀態組件訪問props.auth值。 但是在嘗試訪問它時出現錯誤

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

這里有任何建議。 謝謝你。

//道具值

//無狀態組件

const LandingPage = (props) => {

    Navbar.propTypes = {
      auth: PropTypes.object.isRequired,
      loading: PropTypes.object.isRequired
    }


    const { isAuthenticated, user } = props.auth;
    
    return (
      <div className="container-big-content">

        { user ? (user.is_admin === true && isAuthenticated ? 
            ( <MenuLogin/> ) : ( <Route component={Error}/>) ):  <Route component={Error}/> }
      </div>
    );
  }
  
  const mapStateToProps = state => ({
    auth: state.auth,
    loading: state.apiCallsInProgress > 0
  });
export default connect(mapStateToProps, null)(LandingPage);

Answer 1

正如@RobinZigmond 所建議的那樣，它看起來並不像錯誤來自該組件。

我們可以稍微清理一下這個組件以幫助調試。

import MenuLogin from './path/to/MenuLogin'
import Error from './path/to/Error'
import Route from 'react-router'
const LandingPage = (props) => {
  const { isAuthenticated, user } = props.auth;
    
  const isUserAdmin = user && user.is_admin && isAuthenticated

  return (
    <div className="container-big-content">
      {isUserAdmin ? <MenuLogin /> : <Route component={Error} />}
    </div>
   );
}
  
const mapStateToProps = state => ({
  auth: state.auth,
  loading: state.apiCallsInProgress > 0 
});

LandingPage.propTypes = { 
 auth: PropTypes.object.isRequired,
 loading: PropTypes.object.isRequired
}

export default connect(mapStateToProps)(LandingPage);