React中的BUG记录——Error: Element type is invalid: expected a string (for built-in components) or a class

问题描述

语法各个方面没有问题，报以下错误：
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of App.

代码

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'

ReactDOM.render(
    <App/>,
  document.getElementById('root')
);

app.js

import './App.css';
import Inputdemo from './components/Inputdemo';
import JsonDatause from './components/JsonDatause';
import Datause from './components/Datause'

function App() {
  return (
    <div>
      <JsonDatause />
      <hr/>
      <Inputdemo />
      <hr/>
      <Datause />
    </div>
  );
}
export default App

通过注释溯源方法得出Datause组件出现问题

Datause.js

import React, { Component } from 'react'
import Datamytest from './Datause.json';
// 这个文件对输入的json文件内容进行统一加入默认属性,使用展现出来

export default class Datause extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {
                total: 0,
                records: [{}, {}],
            }
        };
    }
    componentDidMount() {
        this.loadData();
    }
    loadData = () => {
        const datatest = Datamytest;
        datatest.forEach((item, index) => {
            item.age = index+1;
            item.title = "index";
        })
        // const a = Object.assign({}, this.state.data, { total: datatest.length, records: datatest });
        this.setState({
            data: { total: datatest.length, records: datatest },
        }, () => {
            console.log(this.state.data);
        });
    };

    render() {
        const { data } = this.state;
        console.log(data.records);
        return (
            <div>
                {data.records.length && data.records.map((item,index) => 
                    <div key={index} title={item.id}>
                        <span > &nbsp;&nbsp;&nbsp;&nbsp;   {item.id}        &nbsp;&nbsp;&nbsp;&nbsp;  </span>
                        <span > &nbsp;&nbsp;&nbsp;&nbsp;   {item.title}     &nbsp;&nbsp;&nbsp;&nbsp; </span>
                        <span > &nbsp;&nbsp;&nbsp;&nbsp;   {item.age}       &nbsp;&nbsp;&nbsp;&nbsp; </span>
                        <span > &nbsp;&nbsp;&nbsp;&nbsp;   {item.isvName}   &nbsp;&nbsp;&nbsp;&nbsp;  </span>
                    </div>
                )}
            </div>
        )
    }
}

以上三个文件都没有语法以及各方面的错误，yarn start运行的时候也是成功，但是网页出现了如图示的错误。

问题原因：

组长说可能是缓存问题。

解决方法：

重命名文件