Невозможно отобразить объект JSON в списке из Github. - PullRequest
Новая
       9

Невозможно отобразить объект JSON в списке из Github.

0 голосов
/ 06 сентября 2018 
`import store from '../store/configureStore'; // ACTIONS

export const fetchIssues = () => {
  return {
    type: 'FETCH_ISSUE'
  };
};

export const fetchedIssues = (data) => {
  return {
    type: 'FETCHED_ISSUE',
    data
  };
};

export const error = () => {
  return {
    type: 'ERROR'
  };
};

export const thunkActionCreator = () => {
  store.dispatch(fetchIssues());
  return function(dispatch, getState) {
    return fetch(`https://api.github.com/repos/facebook/create-react-app/issues`)
    .then( (resp) => resp.json() )
    .then( (data) => dispatch(fetchedIssues(data)) )
    .catch( (err) => dispatch(error()) )
  };
};`

const initialState = {  // REDUCERS
  issues: [],
  isFetching: false,
  isFetched: false,
  isError: false
};

const asyncReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_ISSUE':
      return {
        ...state,
        isFetching: true,
        isFetched: false,
        isError: false
      };
    case 'FETCHED_ISSUE':
      return {
        ...state,
        issues: action.data,
        isFetching: false,
        isFetched: true,
        isError: false
      };
    case 'ERROR':
      return {
        ...state,
        issues: [],
        isError: true,
        isFetched: false,
        isFetching: false
      };
  };
};

export default asyncReducer; // Reducers

import React from 'react';  // ISSUES COMPONENT
import { thunkActionCreator } from './actions/actions';
import { connect } from 'react-redux';
import IssueLoader from './Loader';
import IssuesList from './IssuesList';

class Issues extends React.Component {

  componentDidMount() {
    this.props.dispatch(thunkActionCreator());
  }

  render() {
    return (
      <div className="App">
        {this.props.issue !== undefined && this.props.issue.isFetching ? <IssueLoader className='loader'/> : null}
        {this.props.issue !== undefined && this.props.issue.isFetched ? 
          this.props.issue.issues.map((issue) => <IssuesList data={issue}/>) : null}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    issue: state
  }
}

export default connect(mapStateToProps)(Issues);

import React from 'react'; // ISSUES LIST COMPONENT
import {Image, List} from 'semantic-ui-react';
import { connect } from 'react-redux';

class IssuesList extends React.Component {
  render() {
    return (
      <div>
        <h1>List</h1>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    issue: state
  }
}

export default (mapStateToProps)(IssuesList);

Я создаю страницу с проблемами github с использованием response и redux, и API возвращает один массив из 30 объектов, и когда я использую map для данного массива, он выдает следующую ошибку: 

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Я искал все на stackoverflow, github, но не смог найти решение. Я прилагаю фотографии моего кода, пожалуйста, помогите !!

Ответы [ 2 ]

0 голосов
/ 07 сентября 2018

Похоже, ваш IssuesList экспортируется для его модуля неправильно. Я не могу понять, почему mapStateToProps необходим для IssuesList - исходя из вашего кода, он будет видеть, что IssuesList действительно предназначен для отображения каждого элемента проблемы.

Если вы выполните следующую настройку для модуля, в котором определено IssuesList, в вашем коде должны отображаться заголовки проблем, возвращаемые из сетевого запроса: 

export default class IssuesList extends React.Component {
  render() { 
    return (
      <div>
        <h1>{ this.props.data.title }</h1>        
      </div>
    );
  }
}
0 голосов
/ 07 сентября 2018

Эта ошибка может иметь отношение к вашему компоненту или к тому, как вы импортируете, а не к API.Вот предыдущий ответ на ваш вопрос Uncaught Ошибка: Инвариантное Нарушение: Тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс / функция, но получил: объект

...