ReactJS: Нахождение идентификатора указанного c запроса для использования в функции, которая отправит действие

Question

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

request.component.jsx:

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

class Request extends Component {

    handleClick = () => {
        this.props.removeRequest(this.props.request.id);
    }

    render() {
        const { requests } = this.props;
        const requestList = 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.status}</button>
                        </div>
                    </div>
                </div>
            )
        })
        return (
            <div className="request-list">
                {requestList}
            </div>
        )
    }
}

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

const mapDispatchToProps = (dispatch) => {
    return {
        removeRequest: (id) => { dispatch({type: 'REMOVE_REQUEST', id: id}) }
    }
}

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;

У меня есть следующие данные в качестве исходного состояния.

запросы.данных. js:

export default [
        {
            "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"
        },
        {
            "id": 3,
            "timestamp": Date.now(),
            "description": "Need help with ordering",
            "status": "Assistance Requested"
        },
    ]

запросы.редуктор. js:

import INITIAL_STATE from './requests.data';

export default (state = INITIAL_STATE, action) => {
    console.log(action);
    return state;
}

rootReducer. js:

import { combineReducers } from 'redux';

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

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

В request.component.jsx у меня есть функция removeRequest (), которая вызывается всякий раз, когда кнопка в компоненте Request является щелкнул. Вызов функции removeRequest () отправит действие 'REMOVE_REQUEST'. Метод removeRequest () принимает идентификатор запроса в качестве параметра.

Однако, поскольку у меня есть список запросов, я не уверен, как получить идентификатор указанного c запроса, по которому щелкают.

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

Answer 1

Для вашей кнопки:

<button type="button" className="request-button" 
onClick={this.handleClick}>{request.status}</button>

Вы можете передать идентификатор:

<button type="button" className="request-button" 
onClick={() => this.handleClick(request.id)}>{request.status}</button>

Вам нужно изменить свой дескрипторНажмите, чтобы принять параметр:

handleClick = (id) => {
    this.props.removeRequest(id);
}