React运行News组件触发Element type is invalid报错如何解决

该报错的核心原因是你导入的自定义组件实际值为undefined，结合现有代码按以下步骤排查即可解决：

• 优先核对NewsItem、Spinner两个组件的导出导入方式是否匹配
  • 若组件文件内使用的是默认导出（写法为export default 组件名），你当前的导入语法正确
  • 若组件文件内使用的是命名导出（写法为export class 组件名 extends Component），需要将导入语句修改为带花括号的格式：

    import { NewsItem } from "./NewsItem";
    import { Spinner } from "./Spinner";
    

• 检查两个组件文件的相对路径是否与实际项目目录一致，注意文件名和路径的大小写，React在编译时对路径大小写敏感
• 修复代码中的隐性问题：
  1. 你在componentDidMount的setState逻辑中没有存储接口返回的总条数，会导致下一页按钮的禁用判断完全失效，修改对应逻辑：

  async componentDidMount() {
    let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&apiKey=561578a70b89478abce79fddfeae432b&page=1&pageSize=15`;
    this.setState({ loading: true });
    let data = await fetch(url);
    let parseData = await data.json();
  
    this.setState({
      articles: parseData.articles,
      totalResults: parseData.totalResults, // 新增该行存储总条数
      loading: false,
      author: parseData.author,
      published: parseData.publishedAt,
    });
  }
  

  2. 渲染NewsItem时传入的time参数取值错误，你当前取的是全局的elements.published，实际应取单条新闻的发布时间字段，修改为：

  time={elements.publishedAt}
  

内容的提问来源于stack exchange，提问作者yashrith