ReactJS - TypeError: запросы. Карта не является функцией

Question

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

запросы. *:

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:

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

class Request extends Component {
    render() {
        const { requests } = this.props;
        const requestList = requests.map(request => {
            return (
                <div class="request-box" key={request.id}>
                    <div class="request-details">
                        <div>
                             <h1>Table {request.id}, {request.timestamp}</h1>
                             <h2>{request.description}</h2>
                        </div>
                        <div class="status-button">
                            <button type="button" class="request-button">{request.status}</button>
                        </div>
                    </div>
                </div>
            )
        })
        return (
            <div className="request-list">
                {requestList}
            </div>
        )
    }
}

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

export default connect(mapStateToProps)(Request);

Я пытаюсь отобразить список компонентов запроса, где в списке запросов отображаются данные, определенные в requests.data.js.

Однако я получаю следующую ошибку:

Я не уверен, почему я получаю эту ошибку и как решить это. Любые идеи приветствуются.

Answer 1

Измените это

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

на

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

, потому что у вас есть два редуктора, и один из них - requests, который обрабатывает состояние с массивом с именем requests внутри это.

Answer 2

Я бы просто экспортировал массив вместо

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