ReactJS：将用户对象作为道具传递给组件会导致其值未定义

Question

我正在使用React应用程序，正在使用Redux来存储状态。我有以下代码。

requests.data.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"
        }   
    ]
}

requests.actions.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
})

我具有以下RequestListPage组件。

requests.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组件。但是，在request.component.jsx中，当我console.log()用户对象的值时，得到以下信息：

我不确定为什么将用户作为道具传递给Request组件时，用户对象的值未定义。任何见解均表示赞赏。

Answer 1

您在请求组件中破坏了错误的结构

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