TypeError：无法读取未定义React的属性'map'
此页面上出现地图错误，我试图显示单个俱乐部的数据。我已经可以使用此代码显示单个用户，但由于某些原因，这对俱乐部不起作用。这是我其他文章的链接：https://spectrum.chat/react/help/typeerror-this-state-users-map-is-not-a-function~ae19cba4-541e-4ab3-88ec-c3b4bf9bbf15
import React, { Component, Fragment } from "react";
import {
Row,
Card,
CardBody,
Nav,
NavItem,
UncontrolledDropdown,
DropdownToggle,
DropdownItem,
DropdownMenu,
TabContent,
Table,
TabPane,
Badge,
} from "reactstrap";
import { NavLink } from "react-router-dom";
import classnames from "classnames";
import GalleryProfile from "../../../containers/pages/GalleryProfile";
import Breadcrumb from "../../../containers/navs/Breadcrumb";
import { Colxx } from "../../../components/common/CustomBootstrap";
import IntlMessages from "../../../helpers/IntlMessages";
import { injectIntl } from "react-intl";
import whotoFollowData from "../../../data/follow";
import UserCardBasic from "../../../components/cards/UserCardBasic";
import SmallLineCharts from "../../../containers/dashboards/SmallLineCharts";
import NewComments from "../../../containers/dashboards/NewComments";
import Rating from "../../../components/common/Rating";
export default class ClubBarProfile extends Component {
constructor(props) {
super(props);
this.state = {
modal: false,
clubs: [],
categories: [],
};
this.toggleTab = this.toggleTab.bind(this);
this.state = {
activeTab: "1"
};
this.friendsData = whotoFollowData.slice();
this.followData = whotoFollowData.slice(0,5);
}
toggleTab(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab
});
}
}
toggle = () => {
this.setState(prevState => ({
modal: !prevState.modal
}));
};
async componentDidMount() {
const { clubId } = this.props.match.params
try {
const url = `http://ec2-3-15-176-119.us-east-2.compute.amazonaws.com:8080/clubs/get/${clubId}`
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Access-Token': '1*adminaccesstoken'
}
}).then(res => res.json())
.then(json => {
console.log(json)
this.setState({
clubs: json,
})
});
} catch (error) {
console.error('Error:', error);
}
try {
const url = `http://ec2-3-15-176-119.us-east-2.compute.amazonaws.com:8080/category/all`
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Access-Token': '1*adminaccesstoken'
}
}).then(res => res.json())
.then(json => {
console.log(json)
this.setState({
categories: json,
})
});
} catch (error) {
console.error('Error:', error);
}
}
renderClubs() {
return this.state.clubs.map((club, index) => {
const { clubId, name, city, country, email, verified } = club //destructuring
return (
<div>
<h1>{club.name}</h1></div>
)
})
}
render() {
return (
<Fragment>
<Row>
<Colxx xxs="12">
{this.renderClubs()}
<div className="text-zero top-right-button-container">
<UncontrolledDropdown>
<DropdownToggle
caret
color="primary"
size="lg"
outline
className="top-right-button top-right-button-single">
<IntlMessages id="pages.actions" />
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
Edit
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Delete
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</div>
<Nav tabs className="separator-tabs ml-0 mb-5">
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === "1", "nav-link": true })}
onClick={() => { this.toggleTab("1"); }} to="#">
<IntlMessages id="pages.profile" />
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeTab === "2", "nav-link": true })}
onClick={() => { this.toggleTab("2"); }}
to="#">
<IntlMessages id="pages.images" />
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeTab === "3", "nav-link": true })}
onClick={() => { this.toggleTab("3"); }}
to="#">
FOLLOWERS
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={classnames({ active: this.state.activeTab === "4", "nav-link": true })}
onClick={() => { this.toggleTab("4"); }}
to="#">
OTHER
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId="1">
<Row>
<Colxx xxs="12" lg="4" className="mb-4">
<Card className="mb-4">
<img
src="/assets/img/login-background.png"
alt="Detail"
className="card-img-top"
/>
<CardBody>
<p className="text-muted text-small mb-2">
<IntlMessages id="pages.description" />
</p>
<p className="mb-3">
It’s all about simplicity…Less is more. Chocolate Cake
exclusively brings you the classic chocolate cake.
This cake is the one you always dream of-moist cake
and creamy chocolate frosting.
<br />
<br /> This cake proudly serves itself for a family
gathering, a dinner party, a birthday celebration, a
baby christening, and a gift to someone special or
simply to have on hand on the cake stand at home
served with an ice cold glass of milk!
</p>
<p className="text-muted text-small mb-2">
<IntlMessages id="pages.rating" />
</p>
<div className="mb-3">
<Rating total={5} rating={4} interactive={false} />
</div>
<p className="text-muted text-small mb-2">
Price
</p>
<p className="mb-3">$$</p>
<p className="text-muted text-small mb-2">
Categories
</p>
<div className="mb-3">
<p className="d-sm-inline-block mb-1">
<Badge color="outline-primary mb-1 mr-1" pill>
Hip-Hop
</Badge>
<Badge color="outline-primary mb-1 mr-1" pill>
Hip-Hop
</Badge>
<Badge color="outline-primary mb-1 mr-1" pill>
Hip-Hop
</Badge>
<Badge color="outline-primary mb-1 mr-1" pill>
Hip-Hop
</Badge>
<Badge color="outline-primary mb-1 mr-1" pill>
Hip-Hop
</Badge>
<Badge color="outline-primary mb-1 mr-1" pill>
Hip-Hop
</Badge>
<Badge color="outline-primary mb-1 mr-1" pill>
Hip-Hop
</Badge>
</p>
</div>
<p className="text-muted text-small mb-2">
VIP?
</p>
<p>Yes</p>
</CardBody>
</Card>
</Colxx>
<Colxx xxs="12" lg="8">
<SmallLineCharts itemClass="dashboard-small-chart-analytics" />
<NewComments className="mb-4" displayRate={true} />
<Card className="mb-4">
<CardBody>
<h3 className="text-muted mb-2">
Events
</h3>
<Table hover>
<thead>
<tr>
<th>Event ID</th>
<th>Event Name</th>
<th># of People RSVP</th>
<th>Date</th>
<th>Price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>INTL</td>
<td>10</td>
<td>10/19/2019 10:30pm</td>
<td>Free</td>
<td></td>
<td><button className="btn-primary-1" id="editUser" onclick="" >See More</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>INTL</td>
<td>10</td>
<td>10/19/2019 10:30pm</td>
<td>$30</td>
<td></td>
<td><button className="btn-primary-1" id="editUser" onclick="" >See More</button></td>
</tr>
</tbody>
</Table>
</CardBody>
</Card></Colxx>
</Row>
</TabPane>
<TabPane tabId="2">
<GalleryProfile/>
</TabPane>
<TabPane tabId="3">
<Row>
{
this.friendsData.map((itemData) => {
return (
<Colxx xxs="12" md="6" lg="4" key={itemData.key}>
<UserCardBasic data={itemData} />
</Colxx>
)
})
}
</Row>
</TabPane>
<TabPane tabId="4">
<Colxx xxs="12" lg="12" xl="12" className="col-right">
<Card className="mb-4">
<CardBody>
<h3 className="text-muted mb-2">
Payments
</h3>
<div className="mb-3">
<p><b>10/20/19</b></p>
<p>$50.00</p>
</div>
<div className="mb-3">
<p><b>10/20/19</b></p>
<p>$500.00</p>
</div>
<div className="mb-3">
<p><b>10/20/19</b></p>
<p>$39.99</p>
</div>
<div className="mb-3">
<p><b>10/20/19</b></p>
<p>$50.00</p>
</div>
</CardBody>
</Card></Colxx>
<Colxx xxs="12" lg="12" xl="12" className="col-right">
<Card className="mb-4">
<CardBody>
<h3 className="text-muted mb-2">
Rewards
</h3>
<Table hover>
<thead>
<tr>
<th>Check-In ID</th>
<th>Club Name</th>
<th>Points Gained</th>
<th>Points Redeemed</th>
<th>Date</th>
<th>Promotion Type</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>INTL</td>
<td>+15</td>
<td></td>
<td>10/12/19</td>
<td>Check-In</td>
</tr>
<tr>
<th scope="row">2</th>
<td>ClubX Welcome</td>
<td>+300</td>
<td></td>
<td>10/10/19</td>
<td>Welcome Bonus</td>
</tr>
<tr>
<th scope="row">3</th>
<td>INTL</td>
<td></td>
<td>-300</td>
<td>10/10/19</td>
<td>Free Drink</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card></Colxx>
<Colxx xxs="12" lg="12" xl="12" className="col-right">
<Card className="mb-4">
<CardBody>
<h3 className="text-muted mb-2">
Promotions
</h3>
<Table hover>
<thead>
<tr>
<th>Promotion ID</th>
<th>Club Name</th>
<th>Promotion Title</th>
<th>Date Started</th>
<th>Date Ended</th>
<th>Promotion Type</th>
<th>VIP?</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>INTL</td>
<td>BOGO On All Bottles</td>
<td>10/10/19</td>
<td>10/12/19</td>
<td>BOGO</td>
<td>No</td>
</tr>
<tr>
<th scope="row">1</th>
<td>INTL</td>
<td>BOGO On All Bottles</td>
<td>10/10/19</td>
<td>10/12/19</td>
<td>BOGO</td>
<td>Yes</td>
</tr>
<tr>
<th scope="row">1</th>
<td>INTL</td>
<td>BOGO On All Bottles</td>
<td>10/10/19</td>
<td>10/12/19</td>
<td>BOGO</td>
<td>No</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card></Colxx>
<Colxx xxs="12" lg="12" xl="12" className="col-right">
<Card className="mb-4">
<CardBody>
<h3 className="text-muted mb-2">
Reservations
</h3>
<Table hover>
<thead>
<tr>
<th>Reservation ID</th>
<th>Club Name</th>
<th># of People</th>
<th>Time Expected</th>
<th>Table</th>
<th>VIP?</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>INTL</td>
<td>10</td>
<td>10/19/2019 10:30pm</td>
<td>$3,000 Minimum</td>
<td>Yes</td>
<td><button className="btn-primary-1" id="editUser" onclick="" >See More</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>INTL</td>
<td>10</td>
<td>10/19/2019 10:30pm</td>
<td>$3,000 Minimum</td>
<td>Yes</td>
<td><button className="btn-primary-1" id="editUser" onclick="" >See More</button></td>
</tr>
</tbody>
</Table>
</CardBody>
</Card></Colxx>
</TabPane>
</TabContent>
</Colxx>
</Row>
</Fragment>
);
}
}
0 个答案:
没有答案
相关问题
- React - TypeError：无法读取未定义的属性“map”
- React：TypeError：无法读取未定义的属性“map”
- React-Redux TypeError：无法读取未定义的属性“ map”
- React Jest：TypeError：无法读取未定义的属性“ map”
- TypeError：无法在反应BeatifulDnD上读取未定义的属性'map'
- React --- TypeError：无法读取未定义的属性“ map”
- TypeError：无法读取未定义反应错误的属性“ map”
- TypeError：无法读取未定义React的属性'map'
- 反应，TypeError：无法读取未定义的属性“ map”
- TypeError：无法使用react-redux读取未定义i的属性'map'
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？