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() {
        const { requests } = this.props;
        const requestList = requests.length ? (
            requests.map(request => {
            return (
                <div className="request-box" key={request.id}>
                    <div className="request-details">
                        <div>
                             <h1>Table {request.id}, {request.timestamp}</h1>
                             <h2>{request.description}</h2>
                        </div>
                        <div className="status-button">
                            <button type="button" className="request-button" onClick={() => this.handleClick(request.id, request.status)}>{request.status}</button>
                        </div>
                    </div>
                </div>
            )
        })
    ) : (
        <div>No requests yet.</div>
    )
        return (
            <div className="request-list">
                {requestList}
            </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 from 'react';
import { connect } from 'react-redux';

import Request from '../../components/request/request.component';

import './requests.styles.scss';


class RequestListPage extends React.Component {

    render() {
        return (
            <div className="requests-page">
                <h1>Requests</h1>
                <div className="requests-container">
                    <Request />
                </div>
            </div>
        )
    }
}


export default RequestListPage;

В request.component.jsx я сопоставляю список запросов из исходного состояния и храню их в переменной с именем requestList. По сути, компонент Request содержит список запросов.

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

Однако я не уверен, каким должен быть код в компоненте запроса в этом случае. Например, у меня есть следующий код для компонента Request:

request.componentnew.jsx:

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

class Request extends Component {

    render() {
        <div className="request-box">
            <div className="request-details">
                <div>
                    <h1>Table 1, 12:00PM</h1>
                    <h2>Need help with ordering</h2>
                </div>
                <div className="status-button">
                    <button type="button" className="request-button">Assistance Requested</button>
                </div>
            </div>
        </div>
    }
}

Я знаю, что мне придется переместить mapStateToProps и mapDispatchToProps функционирует до requests.component.jsx, если я сопоставляю объекты запроса из исходного состояния там. Однако, поскольку информация о каждом объекте запроса будет доступна в requests.component.jsx, что бы я поместил в компонент запроса? Например, у меня есть жестко закодированная информация в request.componentnew.jsx, но я не знаю, что я должен иметь в компоненте запроса в request.component.jsx, если я вставляю информацию в каждый компонент запроса посредством сопоставления через список запросов в requests.component.jsx .

Любые идеи приветствуются.

Answer 1

В основном ваш request component будет иметь атрибуты, которые есть у каждого объекта вашего requestsList.

Я имею в виду следующее:

{
   "id": 9,
   "timestamp": Date.now(),
   "description": "Need help with ordering",
   "status": "Completed"
}

Таким образом, ваш request компонент будет упомяните выше эти реквизиты.

Затем в вашей функции render вы можете напрямую выполнить рендеринг следующим образом:

 //...code

requests.map(request => {
    return (
        <Request request={request} key={request.id}/>
    )

//...code

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

 //...code

requests.map(request => {
 return (
   <Request
   id={request.id}
   key={request.id}
   timestamp={request.timestamp}
   description={request.description}
   status={request.status}
   />;


//...code

В принципе, какой бы JSX у вас ни был в вашем map на requestsList, он будет go в Request компонент.

Тогда в вашем Request компоненте вы можете использовать реквизит так:

render() {
        <div className="request-box">
            <div className="request-details">
                <div>
                    <h1>{this.props.timestamp}</h1> //using props
                    <h2>{this.props.description}</h2> //using props
                </div>
                <div className="status-button">
                    <button type="button" className="request-button">Assistance Requested</button>
                </div>
            </div>
        </div>
    }