Question

我正在尝试从另一个组件调用组件。但是，我得到了这两个错误：

页面上2个错误中的1个
  React.createElement：type无效 - 期望一个字符串（for   内置组件）或类/函数（用于复合组件）   但得到了：对象。您可能忘记从中导出组件   文件已定义。请在displayRevenue.js
中检查您的代码
页面上2个错误中的2个
  元素类型无效：期望一个字符串（对于内置组件）   或类/函数（对于复合组件）但得到：对象。您   可能忘记从您定义的文件中导出组件。   检查DisplayRevenue
的渲染方法

Parent Component即DisplayRevenue如下：

import React, { Component } from 'react';
import '../App.css';
import ListData from './listdata.js'
var axios = require('axios');

class DisplayRevenue extends Component {

  constructor(props){
    super(props);
    this.state = { data:[] }
  }
  componentWillMount() {
   this.loadRevenue(this.props.url, this.props.token);
 }

  setData(data){
    this.setState(data:data);
    console.log(this.state.data);    //this gives output as json object
  }

  loadRevenue(url,token){
    axios({
      method:'get',
      url:url,
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
     .then( (response) => {
    //   console.log(response.data);
       this.setData(response.data);
     })
     .catch(function (error) {
       console.log("Error in loading Revenue "+error);
     });
  }

  render() {
  var ListData = this.state.data.map( (invoice) => {return <div>{invoice.customerNumber}</div>})
    return (
      <ListData />
    );
  }
};

export default DisplayRevenue;

Child Component即ListData如下：

import React, { Component } from 'react';
import '../App.css';

class ListData extends Component {

  render() {
    return (
      <div>
        {"HI"}
      </div>
    );
  }
  //{this.props.data.map( (invoice) => <div>{invoice.customerNumber}</div>)}
}

export default ListData;

这两个组件都在同一个文件夹中，即'components'
导致此错误的原因是什么？

注意：我之前已经问过这个问题的问题，但没有一个能解决我的错误。

Answer 1

正如@Felix Kling所说，代码中覆盖组件存在问题。试试这个：

import React, { Component } from 'react';
import '../App.css';
//import ListData from './listdata.js'
var axios = require('axios');

class DisplayRevenue extends Component {

  constructor(props){
    super(props);
    this.state = { data:[] }
  }
  componentWillMount() {
   this.loadRevenue(this.props.url, this.props.token);
 }

  setData(data){
    this.setState(data:data);
    console.log(this.state.data);    //this gives output as json object
  }

  loadRevenue(url,token){
    axios({
      method:'get',
      url:url,
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
     .then( (response) => {
    //   console.log(response.data);
       this.setData(response.data);
     })
     .catch(function (error) {
       console.log("Error in loading Revenue "+error);
     });
  }

  render() {
  //var ListData = this.state.data.map( (invoice) => {return <div>{invoice.customerNumber}</div>})
    return (
      <ListData data={this.state.data}/>
    );
  }
};

export default DisplayRevenue;

class ListData extends Component {

  render() {
    return (
      <div>
        {this.props.data.map( (invoice) => <div>{invoice.customerNumber} </div>)}
      </div>
    );
  }
}

元素：类型无效错误

1 个答案: