如何解决未处理的运行时错误:元素类型无效:应为字符串或类/函数,但得到:未定义
我正在开发一个 react.js 应用程序,在其中我将信息动态呈现到页面。我正在为布局使用语义 UI 反应。一旦我在代码中替换了这一行,就会生成问题标题中提到的特定错误
<Card header={items.header}
stackable='true'
meta={items.meta}
extra = { items.extra }
description = { items.description }
fluid = { items.fluid } />
为此:
<Card>
<Card.Header>{items.header}</Card.Header>
<Card.meta>{items.meta}</Card.meta>
<Card.description>{items.description}</Card.description>
<Card.fluid>{items.fluid}</Card.fluid>
</Card>
Here 是错误的图像。它基本上指向 renderAuctions 函数中的 this.setState。
这是我的代码:
import React,{ Component } from 'react';
import { Card } from 'semantic-ui-react';
class viewauctions extends Component {
constructor(props) {
super(props);
this.state = {
cards: [],closingTime: '',startingPrice: '',auctionAddr: ''
};
}
renderAuctions = () => {
this.setState((prevState) => {
let items = {
header: this.state.auctionAddr,description: `Closing Time: ` + this.state.closingTime,fluid: true,meta: <a>Join Auction</a>,extra: `Starting Price: ` + this.state.startingPrice + ` Wei`
};
return { cards: [...prevState.cards,items] };
});
};
render() {
return (
<div>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.1/dist/semantic.min.css" />
<h1>Open Auctions</h1>
<Card.Group>
<Card>
{this.state.cards.map(items => (
<Link route={`/auctions/viewbales/${items.header}`}>
<Card.Content>
<Card.Header>{items.header}</Card.Header>
<Card.meta>{items.meta}</Card.meta>
<Card.description>{items.description}</Card.description>
<Card.fluid>{items.fluid}</Card.fluid>
</Card.Content>
</Link>
))}
</Card>
</Card.Group>
</div>
);
}
}
export default viewauctions;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。