Question

我正在尝试将记录的数据从我的redux动作传递到前端，但是一直使user.name为null或undefined。

这是前端，我只是试图使user.name出现，以便显示“ hi user.name（人名帐户）”。

 import React, { Component } from "react";
 import { NewPropertyForm, FormPageOne, FormPageTwo, FormPageThree, 
 FormPageFour } from "../../components/NewPropertyForm";
 import { PropertyList } from "../../components/PropertyList";
 import { Container, Button, Modal, ModalCard, ModalCardTitle, 
ModalBackground, ModalCardFooter, ModalCardHeader, Delete, ModalCardBody 
} from 'bloomer';
 import StepZilla from "react-stepzilla";
import modal from "./modal-bg.svg";
import "./Manager.css";
import {login} from '../../actions/authActions'


 import {connect} from 'react-redux';
import { bindActionCreators } from 'redux'

 const steps =
[
  {name: 'Step 1', component: <FormPageOne /> },
  {name: 'Step 2', component: <FormPageTwo /> },
  {name: 'Step 3', component: <FormPageThree /> },
  {name: 'Step 4', component: <FormPageFour /> }
]

 const modalBG = { backgroundImage: `url(${modal})` }

 export class Manager extends Component {
 // Setting our component's initial state
state = {
modal: "",
};

modalOpen = () => {
this.setState({ modal: "is-active" })
}



modalClose = () => {
this.setState({
  modal: "",
  login: "",
 })
}


render() {
let { user } = this.props;
return (
  <div className="manager">
    <Container className="manager-container">
      <div className="columns">
        <div className="column">
          <h1 className="title">Hi {user.name}</h1>
          <h2 className="sub-title">You currently have 3 properties</h2>
          <h2 className="sub-title">Check out the new applications you 
 received.</h2>
        </div>
        <div className="column user-dash-right">
          <Button 
          isColor='primary' 
          className="" 
          onClick={this.modalOpen}><p>Create Listing</p></Button>

        </div>

      </div>

      <h1 className="title has-text-centered">My Properties</h1>
      <PropertyList />


        <div className="new-property-modal">
          <Modal className={this.state.modal}>

            <ModalBackground />
            <ModalCard style={ modalBG } >

                <ModalCardBody>
                    <Delete onClick={this.modalClose} />

                    <div className='step-progress'>
                        <StepZilla
                          steps={steps}
                          showSteps={false}
                          nextButtonCls="button is-medium is-primary"
                          backButtonCls="button is-medium is-primary"
                          />
                    </div>

              </ModalCardBody>


          </ModalCard>
          </Modal>
        </div>


    </Container>
  </div>
);
}
}

const mapStateToProps = ({auth}) => ({
user: auth.user,
authError: auth.authError
});

export default connect(mapStateToProps)(Manager)

这是我已设置的操作

import API from "../utils/API";
import { IS_AUTHENTICATED, AUTHENTICATION_FAILED } from 
'../constants/actionTypes';

export const signup = ({name, email, phonenumber, password, role}) => 
async dispatch => {

try {
    const {data} = await API.saveUser({
      name,
      email,
      phonenumber,
      password,
      role

    })
    dispatch({
        type: IS_AUTHENTICATED,
        payload: data.user
    })
    console.log('--success', data);

  } catch(error) {
    console.error(error);
    console.log('Come on work damnit')
  }
}

export const login = ({email, password}) => async dispatch => {

try {
    const {data} = await API.loginUser({
      email,
      password

    })
    dispatch({
        type: IS_AUTHENTICATED,
        payload: data.user
    });
    console.log('--success', data.user.name);
  } catch(error) {
    dispatch({
        type: AUTHENTICATION_FAILED,
        payload: "Invalid credentials, cannot login"
    });
    console.error(error);
  }
}

export const getAuthenticated = () => async dispatch => {
try {
    const {data, error} = await API.getAuthenticated();
    console.log(data);
    if(data) {
        dispatch({
            type: IS_AUTHENTICATED,
            payload: data
        });
    } else {
        console.log('ssss', error)
    }
    // if(getUser) login
    //else logout
} catch(error) {
    //window redirect to login
}
}


export const logout = () => async dispatch => {
try {
    // const revoke = await API.logout()
    dispatch({
        type: IS_AUTHENTICATED,
        payload: null
    });
    //should automatically display logout nav 
    //or redirect to anther page
} catch(e) {
    //just refresh page
}
}

这些是我的减速器

import {
IS_AUTHENTICATED,
AUTHENTICATION_FAILED
} from '../constants/actionTypes';

const initialState = {
user: null
}

const authReducer = (state = initialState, {type, payload}) => {
switch(type) {
    case IS_AUTHENTICATED:
        return {...state, user: payload, userInfo: payload}
    case AUTHENTICATION_FAILED:
        return {...state, user: null, authError: payload}
    default:
        return state
}
}

export default authReducer;

如您所见，我尝试传递user.name，但是如果我做const {user} = this.props，我一直无法读取null属性。如果我执行const {user} = this.state，我将无法读取未定义的属性。

Answer 1

我发现我刚刚需要添加

        <span>
          <h1 className="title">Hi {user.name}</h1>
        </span>

成功了！

我正在使用mapstatetoprops进行定义

1 个答案: