ReactJS - TypeError：requests.map 不是函数

Question

I am working on a React application and I am using Redux to store the state. I have the following code:

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

requests.reducer.js:

import INITIAL_STATE from './requests.data';
import { CHANGE_REQUEST_STATUS } from './requests.types';

export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case CHANGE_REQUEST_STATUS:
            return state;
        default:
            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:

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);

I am trying to render a list of Request Components, where the request list shows the data that is defined in requests.data.js .

However, I am getting the following error:

I am not sure why I am getting this error and how to resolve it. Any insights are appreciated.

Answer 1

Change this

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

to

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

because you have two reducers and one of them is requests which handles a state that has an array named requests inside it.

Answer 2

I would just export an array instead

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