javascript - 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"
        }   
    ]
}

我有以下请求组件。

请求.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);

该组件显示在以下页面中。

requests.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 的变量中。本质上，请求组件包含请求列表。

我想更改此代码，以便 RequestListPage 组件将每个请求对象从状态映射到请求组件，以便请求组件关注单个请求而不是列表。

但是，我不确定在这种情况下请求组件中的代码应该是什么。例如，我有以下请求组件代码:

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 组件中放置什么？例如，我在 request.componentnew.jsx 中硬编码了信息，但我不知道 request.component.jsx 中的 Request 组件中应该有什么，如果我通过 requests.component.jsx 中的请求列表进行映射，在每个请求组件中插入信息。

任何见解都值得赞赏。

Answer 1

基本上，您的请求组件将具有requestsList的每个对象所具有的属性。

我的意思是这样的:

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

因此您的request组件将具有上面提到的这些 Prop 。

然后在你的render函数中，你可以直接像这样渲染:

 //...code

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

//...code

如果您不希望传递整个 request 对象，也可以单独传递 Props。

 //...code

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


//...code

基本上，无论您当前在 requestsList 上的 map 中拥有什么 JSX，都将进入 Request 组件。

然后在您的 Request 组件中，您可以像这样使用 props:

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>
    }