Question

我反应很新，但是我遇到了一个让我陷入困境的问题。有没有理由在实例化组件时反应会抛出WHERE Booking_Date >= TRUNC(sysdate - 1) AND Booking_Date < TRUNC(sysdate) GROUP BY REPLACE(CM_NAME, '/', ' '), TO_CHAR(Booking_Date,'MM/DD/YYYY')错误，而在实例化另一个字面上具有完全相同代码的组件时却没有？

继承人我所得到的：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

我从我正在浏览并在页面上显示的API中获取一些数据。很多数据都有嵌套数组，但任何有方法的数据都以相同的格式返回。

我在尝试渲染import React, { Component } from 'react'; import Method from "./Method"; class InterfaceContent extends Component { renderInterface = (interfaceItem, index) => { const itemKey = `interface-Item-${index}`; const {Name, Interface, Method} = interfaceItem; return ( <div key={itemKey}> <p>{Name}</p> <div className="interface-item-method"> {(interfaceItem.Method.length >= 1) ? <Method Method={interfaceItem.Method}/> : null} </div> </div> ); } render() { return ( <div className="interfacecontent-component"> <h3 className="interfaces">Interfaces</h3> {this.props.Interfaces.map(this.renderInterface)} </div> ); } } export default InterfaceContent;组件时遇到错误，看起来像这样

<Method />

令我感到困惑的是，我传递给import React, { Component } from 'react'; class Method extends Component { renderMethod = (method, index) => { const itemKey = `method-item-${index}`; const {DeprecatedSince, Description, Example, Name, Since, Argument, Return } = method; return( <div key={itemKey} className="method"> <h2>Name: {Name}</h2> <h2>Description: {Description}</h2> <h2>DeprecatedSince : {DeprecatedSince}</h2> <h2>Example : {Example}</h2> <h2>Since : {Since}</h2> </div> ) } render() { return ( <div className="method-component"> {this.props.Method.map(this.renderMethod)} </div> ); } } export default Method;组件的interfaceItem.Method数据与之前在应用中使用过的结构完全相同。所以，为了测试，我创建了一个<Method />组件，除了名称之外，还复制/粘贴了<InterfaceMethod />文件中完全相同的代码

<Method />

哪个渲染就好没有错误。我用Google搜索关于import React, { Component } from 'react'; class InterfaceMethod extends Component { renderMethod = (method, index) => { const itemKey = `method-item-${index}`; const {DeprecatedSince, Description, Example, Name, Since, Argument, Return } = method; return( <div key={itemKey} className="method"> <h2>Name: {Name}</h2> <h2>Description: {Description}</h2> <h2>DeprecatedSince : {DeprecatedSince}</h2> <h2>Example : {Example}</h2> <h2>Since : {Since}</h2> </div> ) } render() { return ( <div className="method-component"> {this.props.Method.map(this.renderMethod)} </div> ); } } export default InterfaceMethod;错误的所有内容似乎都是Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.结尾，最终导致某些内容被导入错误。

这似乎不是这种情况。我在整个应用程序的其他几个地方使用but got: undefined组件，我需要呈现类似的内容 - 是否会有干扰的原因？如果我可以避免它，我讨厌在它们内部有两个具有相同代码的组件。

Answer 1

可能是您在interfaceItem组件中的renderInterface方法中对InterfaceContent进行解构时的错误。

renderInterface = (interfaceItem, index) => {
    const itemKey = `interface-Item-${index}`;
    const {Name, Interface, Method} = interfaceItem;

    return (
        <div key={itemKey}>
            <p>{Name}</p>
            <div className="interface-item-method">
                {(interfaceItem.Method.length >= 1) ? <Method Method={interfaceItem.Method}/> : null}
            </div>
        </div>

    );
}

当您渲染Method组件（使用<Method />）时，会发生什么，它不是实际组件，而是您从interfaceItem解构的Method数组。这就是为什么你要获得数组，因为你试图渲染一个对象而不是一个反应组件。

React：元素类型在一个组件中无效，但在另一个组件中无效

1 个答案: