Question

我在浏览器中收到此错误。

期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：undefined。检查Tabbox_order的呈现方法。

这是我的＆＃39; Tabbox_orber.js＆＃39;文件

import React from "react";

import Walker from './Walker';
import Order from './Order';

require('../css/Tabbox-order.scss');

const Tabbox_order = (props) => {
  const Order = props.orders.map((order, index) => {
    return <Order order={order} key={index} />
  });

  return(
    <div id='tabbox-order'>
      <div id='tabbox-bar'>
        <p>Username</p>
        <p>Service Details</p>
        <span>Address</span>
      </div>
      <div id='Cutting' ></div>
      {Order}
    </div>
  )

}


export default Tabbox_order

这是我的＆＃39; Order.js＆＃39;文件。

import React from "react";

require('../css/Order.scss');

const Order = ({order}) => {

  return(

    <div id='order-info'>
      <div className='infor'>
        <img src='../../img/logo.png'></img>

        <div>{order.pet.name}</div>

        <div>8 mins ago</div>
      </div>
      <div className='infor'>
        <img src='../../img/logo.png'></img>

        <div>Zichen Wang</div>

        <div>8 mins ago</div>
      </div>
      <div className='infor'>
        <img src='../../img/logo.png'></img>

        <div>Zichen Wang</div>
        <div>8 mins ago</div>
      </div>

    </div>


  )
}

export default Order

props.orders中的Tabbox.js是我从Layout.js传递的对象数组。

所以我使用箭头功能来定义这个组件，我不知道这个错误意味着什么。有人能帮助我吗？非常感谢！

我在console.log函数中添加了props.orders.map并且它有效。它打印两次因为props.order是一个数组有两个对象。现在问题是Order.js没有出现。

Answer 1

可能是您导入的组件名称Order与您定义并随后在render方法中使用的const Order之间的名称冲突。尝试将后者更改为其他内容

React.js未捕获错误：元素类型无效：

1 个答案: