ReactJS: передача объекта пользователя в качестве реквизита компоненту приводит к тому, что его значение не определено

Question

Я работаю над приложением React и использую Redux для хранения состояния. У меня есть следующий код.

запросы. Данные. js:

export default {
    requests: [
        {
            "id": 9,
            "timestamp": Date.now(),
            "description": "Need help with ordering",
            "status": "Completed"
        },
        {
            "id": 2,
            "timestamp": Date.now(),
            "description": "Need help with ordering",
            "status": "Assistance Requested"
        },
        {
            "id": 4,
            "timestamp": Date.now(),
            "description": "Need help with ordering",
            "status": "Assistance Requested"
        },
        {
            "id": 7,
            "timestamp": Date.now(),
            "description": "Need help with ordering",
            "status": "Assistance Requested"
        }   
    ]
}

запросы. Действия. js:

import { CHANGE_REQUEST_STATUS } from './requests.types';

export const changeRequest = (id, user, status) => {
    return {
        type: CHANGE_REQUEST_STATUS,
        id,
        user,
        status
    }
}

user.reducer. js:

import { SET_CURRENT_USER } from './user.types';

const INITIAL_STATE = {
    currentUser: null
}

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case SET_CURRENT_USER:
            return { ...state, currentUser: action.payload }
        default:
            return state;
    }
}

user.actions. js:

import { SET_CURRENT_USER } from './user.types';

export const setCurrentUser = currentUser => dispatch => {
    dispatch({
        type: SET_CURRENT_USER,
        payload: currentUser
    });
}

root .reducer. js:

import { combineReducers } from 'redux';

import userReducer from './user/user.reducer';
import requestsReducer from './requests/requests.reducer'

export default combineReducers({
    user: userReducer,
    requests: requestsReducer
})

I иметь следующий компонент RequestListPage.

reports.component.jsx:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Request from '../../components/request/request.component';
import './requests.styles.scss';

class RequestListPage extends Component {

    render() {
        const { requests } = this.props;
        const { user } = this.props;

        console.log("Printing user");
        console.log(user);

        const requestList = requests.length ? (
            requests.map(request => {
                return(
                    <Request request={request} user={user} key={request.id}/>
                )
            })
        ) : (
            <div>No requests yet.</div>
        )

        return (
            <div className="requests-page">
                <h1>Requests</h1>
                <div className="requests-container">
                    <div className="request-list">
                        {requestList}
                    </div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        requests: state.requests.requests,
        user: state.user.currentUser
    }
}

export default connect(mapStateToProps)(RequestListPage);

Печать объекта пользователя в приведенном выше коде дает следующее:

У меня есть следующий компонент запроса.

request.component.jsx:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { changeRequest } from '../../redux/requests/requests.actions';
import './request.styles.scss';

class Request extends Component {

    handleClick = (id, user, status) => {
        this.props.changeRequest(id, user, status);
    }

    render() {
        const { id, timestamp, description, status } = this.props.request;
        const { user } = this.props.user;
        console.log("PRINTING USER");
        console.log(user);
        return (
            <div className="request-box">
                <div className="request-details">
                    <div>
                        <h1>Table {id}, {timestamp}</h1>
                        <h2>{description}</h2>
                    </div>
                    <div className="status-button">
                        <button type="button" className="request-button" onClick={() => this.handleClick(id, user, status)}>{status}</button>
                    </div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        requests: state.requests.requests,
        user: state.user.currentUser
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        changeRequest: (id, user, status) => { dispatch(changeRequest(id, user, status)) }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Request);

В requests.component.jsx я передал объект пользователя в Компонент запроса в качестве реквизита. Однако в request.component.jsx, когда я console.log() значение пользовательского объекта, я получаю следующее:

Я не уверен, почему когда Я передаю пользователя в качестве реквизита для компонента запроса, значение объекта пользователя не определено. Любые идеи приветствуются.

Answer 1

Вы неправильно деструктурируете, в вашем компоненте Request

render() {
        const { id, timestamp, description, status } = this.props.request;
        //const { user } = this.props.user;<-- This is wrong
        const { user } = this.props; //<-- This works!
        console.log("PRINTING USER");
        console.log(user);