Реквизит показывается только под строкой, если оператор реагирует на избыточность

Question

Дурачился с каким-то кодом и пришел к чему-то хитрому.В настоящее время я показываю данные пользователя, если пользователь isAuthenticated.Тем не менее, я должен поставить this.props.user?во встроенном заявлении.В противном случае 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

Вам нужна проверка, потому что вы получаете доступ к атрибутам имени пользователя и электронной почты объекта пользователя.

Предполагается, что при начальном рендеринге

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

Вы пытаетесь получить доступ к электронной почте и имени пользователя,которые не существуют на данный момент.

Чтобы избежать этого,

Может быть, вы можете передать isAuthenticated внутри самого вашего пользовательского объекта.Это сохранит целостность.

Answer 2

Это просто потому, что при «первой загрузке» компонента пользовательские данные недействительны (я полагаю, я не вижу ваши редукторы)

Итак, допустим, ваш редуктор устанавливает пользователя по умолчанию какnull

• теперь этот компонент загружен
• componentDidMount отправка и вызовы getfetchUser
• getfetchUser займет некоторое время ...
• компонент render не ожидает, поэтому он вызовет render метод
• , но user еще не установлен, так как вы не получили ответ от сервера
• Итак, при первом рендере вы видите user как ноль
• , но как только ajax-вызов возвращается, он устанавливает пользователя, и вы хороши

, поэтому вы видите это«странное» поведение, но так оно и есть в текущей реализации.

Вы можете попробовать различные приемы, чтобы убедиться, что вы хороши, например:

• придерживайтесь того, чтовы

• добавили флаг loading, чтобы вы могли знать, что ожидаете ответа от сервера.Это лучший вариант, потому что вы можете обрабатывать ошибки с сервера.