Блог

Я не могу понять, почему я получаю эту ошибку «TypeError: this.props.reviews.map не является функцией» для моего файла ReviewsContainer.

Я чувствую, что что-то упускаю, но я полагаю, что я определил свой реквизит в компоненте Reviews .

Здесь у меня есть компонент отзывов:

 /components/reviews/Reviews.js


import React from "react";
import { NavLink } from "react-router-dom";

const ReviewCard = props => {
  const url = `/reviews/${props.review.id}`;
  return (
    <div className="ReviewCard">
      <NavLink to={url} exact>
        <p>
          <strong>Title:</strong> {props.review.title}
        </p>
      </NavLink>

      <p>
        <strong>Content: </strong>
        {props.review.content}
      </p>
      <img className="ReviewImage" src={props.review.img_url} alt="(no pic)" />

    </div>
  );
};

export default ReviewCard;
  

Мой файл действия выборки:

 /actions/reviewsFetch.js

export const reviewsFetch = () => {

    return dispatch => {
        fetch('http://localhost:3000/api/v1/reviews', {
            method: "GET",
            headers: {
                "Content-Type": "application/json"
            }
        })
        .then(response => response.json())
        .then(reviews => dispatch ({
            type: 'REVIEWS_FETCH',
            payload: reviews.data
        }))
    }
}
  

и, наконец, мой файл ReviewsContainer:

 /containers/ReviewsContainer.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { reviewsFetch } from "../actions/reviewsFetch";
import ReviewCard from "../components/reviews/Reviews";


class ReviewsContainer extends Component {

  componentDidMount() {
    this.props.reviewsFetch();
  }
  render() {
    return (
      <div>
        {this.props.reviews.map((review, index) => (
          <ReviewCard review={review} key={index} />
        ))}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    reviews: state.reviews
  };
};

export default connect(
  mapStateToProps,
  { reviewsFetch }
)(ReviewsContainer);
  

Отзывы Редуктор

 export default function reviewReducer (state = {reviews: [], comments: []}, action) {
    switch (action.type) {
        case 'REVIEWS_FETCH':
            return {...state, reviews: action.payload}
        default:
            return state
    }
}

  

index.js

 import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import App from './App.js';
import store from './store.js';

ReactDOM.render(
  <Provider store={ store }>
      <App />
  </Provider>,
  document.getElementById('root')
);
  

store.js

 import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import reviews from './reducers/reviewReducer'

const reducers = combineReducers({
    reviews
  })
  
  const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const store = createStore(reducers, composeEnhancer(applyMiddleware(thunk)))

  export default store