Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция

Question

• Я пытаюсь научиться реагировать на вызовы redux api
• , поэтому я взял пример и реализовал в stackblitz, но у меня появляется ошибка ниже, когда я выбираю какой-то канал и нажимаю верхнюю кнопку новостей
• Можете ли вы сказать мне, как это исправить
• с моим кодом и стекаблицем ниже https://medium.com/@lavitr01051977/basic-react-redux-app-with-async-call-to-api-e478e6e0c48b

https://stackblitz.com/edit/react-redux-realworld-j95tpu?file=actions/index.js

code
export function fetchPosts(channel) {
  return function (dispatch) {
    dispatch(requestPosts());
    return fetch(`https://newsapi.org/v1/articles?source=${channel}&apiKey=${MY_API_KEY}`)
      .then(response => response.json(),
      error => console.log('An error occurred.', error),
    )
      .then((json) => {
        dispatch(receivedPosts(json));
      }, );
  };
}

error

VM1672:37 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `TopNews`.
    in TopNews (created by Connect(TopNews))
    in Connect(TopNews) (created by App)
    in div (created by App)
    in App
    in Provider


Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `TopNews`.
    at invariant (invariant.js:42)
    at instantiateReactComponent (instantiateReactComponent.js:74)
    at instantiateChild (ReactChildReconciler.js:44)
    at eval (ReactChildReconciler.js:71)
    at traverseAllChildrenImpl (traverseAllChildren.js:77)
    at traverseAllChildren (traverseAllChildren.js:172)
    at Object.instantiateChildren (ReactChildReconciler.js:70)
    at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:185)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:224)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703)

Answer 1

Фактическая проблема - это проблема синтаксиса импорта / экспорта.Я расскажу вам, как его найти.

Реальное местоположение проблемы показывается трассировкой стека компонентов:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `TopNews`.
    in TopNews (created by Connect(TopNews))
    in Connect(TopNews) (created by App)
    in div (created by App)
    in App
    in Provider

Если мы посмотрим на TopNews.js, то будет отображаться только <h3>, <div> и <NewsItem>.h3 и div - это просто основные теги, поэтому проблема, вероятно, NewsItem.

В верхней части TopNews.js у вас есть:

import { NewsItem } from '../components/NewsItem';

Однако,в NewsItem.js у вас есть:

export default NewsItem ;

Итак, вы выполняете экспорт по умолчанию, но именованный импорт, и поэтому NewsItem не определен в TopNews.js.

Попробуйте изменить его на import NewsItem from "../components/NewsItem", и оно должно работать.