如何解决无论如何我在这种情况下可以定义状态
如何为列出的数据的给定类组件定义状态? PS仍然是初学者。
import React from 'react'
import { Card,Row,Col } from 'react-bootstrap'
import './AccountsCards.css'
class AccountsCards extends React.Component{
render(){
const data=[
{
mail : 'xya@gmail.com',password : 'hjhjsa87',recovery : 'xxa@gmail.com'
},{
mail : 'xya@gmail.com',]
return(
data.map((listValue,i) => {
return(
<Card className="acard">
<Row className="acc-card-row">
<Col sm={4}>
{listValue.mail}
</Col>
<Col sm={4}>
{listValue.password}
</Col>
<Col sm={4}>
{listValue.recovery}
</Col>
</Row>
</Card>
)
}
)
)
}
}
export default AccountsCards
解决方法
通过像这样在React组件的构造函数中定义状态。
class AccountsCards extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{
mail: "xya@gmail.com",password: "hjhjsa87",recovery: "xxa@gmail.com"
},{
mail: "xya@gmail.com",recovery: "xxa@gmail.com"
}
]
};
}
render() {
return this.state.data.map((listValue,i) => {
return (
<Card className="acard">
<Row className="acc-card-row">
<Col sm={4}>{listValue.mail}</Col>
<Col sm={4}>{listValue.password}</Col>
<Col sm={4}>{listValue.recovery}</Col>
</Row>
</Card>
);
});
}
}
,
添加状态=数据初始化下的数据。
您可以通过引用this.state
来调用数据。
例如
this.state.map(dataItem => {})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。