TypeError: Невозможно прочитать свойство 'map' из undefined при отображении списка комментариев пользователя. - PullRequest
Новая
       28

TypeError: Невозможно прочитать свойство 'map' из undefined при отображении списка комментариев пользователя.

0 голосов
/ 03 мая 2019

Я пытаюсь получить сообщения из поддельного API (заполнителя json), но я получаю сообщение об ошибке TypeError, которая говорит, что не может прочитать свойство 'map' из неопределенного

Вот компонент класса 

import React, { Component } from 'react'
import { connect } from 'react-redux'

import fetchPosts from '../actions/postListAction'

 class PostList extends Component {

componentDidMount() {
    this.props.fetchPosts();
}

  renderList() {
      return this.props.posts.map(post => {
          return (
          <div className="row" key={post.id}>
              <i class="fas fa-user align-left"></i>
              <div className="content">
                  <div className="description">
                      <p>{post.title}</p>
                      <p>{post.body}</p>
                  </div>
              </div>
          </div>
          );
      });
  }

  render() {
    return (
      <div>
        <h3>Posts</h3>
        <div className="post-list">
        {this.renderList()}
        </div>
      </div>
    )
  }
}

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

export default connect(mapStateToProps, { fetchPosts })(PostList)

Вот создатель действия 

import jsonPlaceholder from '../apis/jsonPlaceholder'

const fetchPosts = () => async dispatch => {
        const response = await jsonPlaceholder.get('/posts');
    dispatch({ type: 'FETCH_POSTS', payload: response })
}

export default fetchPosts

Вот редуктор 

export default (state = [], action) => {
    switch (action.type) {
        case 'FETCH_POSTS'
        return action.payload;
        default: 
        return state;
    }
}

API от jsonplaceholder используя axios 

import axios from 'axios';

export default axios.create ({
    baseURL: 'https://jsonplaceholder.typicode.com/'
})

любая помощь будет оценена!

1 Ответ

0 голосов
/ 04 мая 2019

у вас есть опечатка.

в mapStateToПодходит ваше соответствие (POST) для state.posts но в методе map вы говорите в этом .props. (POSTS) они должны быть одинаковыми. эфирный пост или посты Вы должны проверить свой rootReducer и передать правильный ключ тоже ваш компонент

...