Question

曾经愚弄过一些代码，然后遇到了一些棘手的问题。当前，如果用户是经过身份验证的，我正在显示用户数据。但是，我必须把this.props.user放在？在内联语句中。否则，尽管this.props.user是？可以。

这是代码

// import React from "react";
// import { connect } from "react-redux";
// import { getUser } from "../store/actions/userActions";
// import { withRouter } from 'react-router-dom';

import React from 'react';
import { connect } from 'react-redux';
import {  Link } from 'react-router-dom'
import * as actions from '../store/actions/auth'

class UserDetailView extends React.Component {
  componentDidMount(){
    this.props.onTryAutoSignup()
    this.props.getfetchUser(this.props.username)
    console.log(this.props)
    const user = this.props.user
  }




  render(){




    return(

      <div>

      {
        this.props.user//need this or the below become undefined && this.props.isAuthenticated ?
  <div>
    Welcome {this.props.user.username} {this.props.user.email}   
  </div> 
        :
      <div><Link to='/login/'>Login</Link></div>  

      }
      </div>
   )
  }
}

const mapStateToProps = state => {

  return{
    isAuthenticated: state.token !== null,
    user: state.user,
    username: state.username
  }
}
const mapStateToDispatch = (dispatch) => ({
    logout: () => dispatch(actions.logout()),
    onTryAutoSignup: () => dispatch(actions.authCheckState()),
    getfetchUser: id => dispatch( actions.fetchUser( id ) )
})

export default connect(mapStateToProps, mapStateToDispatch)(UserDetailView);

Answer 1

这仅仅是因为在组件的“首次加载”中，用户数据无效（我想，我看不到您的reducer）

因此，假设您的reducer将默认用户设置为null

现在此组件已加载
componentDidMount调度并呼叫getfetchUser
getfetchUser将需要一些时间...
组件render不在等待中，因此它将调用render方法
但是尚未设置user，因为您没有从服务器获得响应
因此在第一个渲染中，您看到user为空
但是只要ajax调用返回，它就会设置用户并且您很好

所以这就是为什么您看到此“怪异”行为的原因，但这就是当前实现中的情况。

您可以尝试各种技巧来确保自己状态良好，例如：

坚持所做的事情
添加一个loading标志，因此您可以知道自己正在等待服务器的响应。这是更好的选择，因为您可以处理服务器中的错误。

Answer 2

您需要检查，因为您正在访问用户对象的用户名和电子邮件属性。

假设是初始渲染，

user = {} // this wont have properties initially
isAuthenticated = true

您尝试访问当时不存在的电子邮件和用户名。

为避免这种情况，

也许您可以在用户对象本身内部传递isAuthenticated。这样可以保持完整性。

只有在React Redux中的内联if语句下显示道具

2 个答案: