ReactJS: рендеринг списка компонентов запроса не отображает никакой информации

Question

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

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

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

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, status) => {
        this.props.changeRequest(id, status);
    }

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

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

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

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

Этот компонент отображается на следующей странице.

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 requestList = requests.length ? (
            requests.map(request => {
                return(
                    <Request request={request} 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
    }
}

export default connect(mapStateToProps)(RequestListPage);

В приведенном выше коде компонент RequestListPage отображает каждый объект запроса из состояние компонента Request, так что компонент Request касается одного запроса, а не списка.

Однако, когда я запускаю свое приложение, я получаю следующее:

Данные в компоненте Request не отображаются. Я не уверен, почему это происходит. Любые идеи приветствуются.

Answer 1

Похоже, вам может потребоваться распространение в свойствах объекта request, так как в Request вы получаете доступ к ним как this.props.XXX против this.props.request.XXX.

<Request {...request} key={request.id}/>

Определение требуемых propTypes уловило бы это для тебя.

Answer 2

Вы отправляете каждый запрос как

<Request request={request} key={request.id}/>

, поэтому вы должны использовать его как

<h2>{this.props.request.description}</h2>

Вы также можете распространять объект запроса как

<Request {...request} key={request.id}/>

использовать их напрямую (this.props.description) так же, как вы использовали.

или вы также можете деструктурировать их внутри компонента Request, если вам нравится

const { description, status, id, timestamp } = this.props.request;

, и использовать их как

<h2>{description}</h2>

Answer 3

Проблема, с которой вы столкнулись, заключается в том, что свойства запроса в компоненте Request были непосредственно в this.props.request, а не в this.props. Это потому, что вы создавали элементы, используя: <Request request={request} key={request.id}/> вместо <Request {...request} key={request.id}/>

class Request extends Component {

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

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

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

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

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