Reactjs：无法访问无状态组件中的道具值

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

Reactjs：无法访问无状态组件中的道具值

Reactjs: Unable to access props value in stateless component

javascript

reactjs

redux

react-props