TypeError：this.state.users.map不是函数reactjs
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TypeError：this.state.users.map不是函数reactjs相关的知识，希望对你有一定的参考价值。
我正在尝试在页面上显示用户信息，但是在使用this.state.users.map时，我不断收到错误消息。相同的功能在另一页上也有效，所以我不知道为什么它不能在另一页上起作用。
import React, Component, Fragment from "react";
import
Row,
Card,
CardBody,
Nav,
Table,
NavItem,
UncontrolledDropdown,
DropdownToggle,
DropdownItem,
DropdownMenu,
TabContent,
TabPane
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 SingleLightbox from "../../../components/pages/SingleLightbox";
import injectIntl from "react-intl";
import whotoFollowData from "../../../data/follow";
import UserCardBasic from "../../../components/cards/UserCardBasic";
import posts from "../../../data/posts";
import Post from "../../../components/cards/Post";
import Rating from "../../../components/common/Rating";
class EditUser extends Component
constructor(props)
super(props);
this.toggleTab = this.toggleTab.bind(this);
this.state =
activeTab: "1",
users: [],
;
this.friendsData = whotoFollowData.slice();
this.followData = whotoFollowData.slice(0,5);
toggleTab(tab)
if (this.state.activeTab !== tab)
this.setState(
activeTab: tab
);
async componentDidMount()
const userId = this.props.match.params
try
const url = `APIURL/$userId`
const response = await fetch(url,
method: 'GET',
headers:
'Content-Type': 'application/json',
'Access-Token': '1*adminaccesstoken'
).then(response => response.json())
.then(json =>
console.log(json);
this.setState(
users: json
)
);
catch (error)
console.error('Error:', error);
renderUser()
return this.state.users.map(function(user, index)
const userId, firstName, lastName = user //destructuring
return (
<div key=user.userId>
<h1>user.firstName user.lastName</h1>
</div>
)
)
render()
return (
<Fragment>
<Row>
<Colxx xxs="12">
this.renderUser()
<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 header>
<IntlMessages id="pages.header" />
</DropdownItem>
<DropdownItem disabled>
<IntlMessages id="pages.delete" />
</DropdownItem>
<DropdownItem>
<IntlMessages id="pages.another-action" />
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
<IntlMessages id="pages.another-action" />
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</div>
<br />
<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="#">
<IntlMessages id="pages.friends" />
</NavLink>
</NavItem>
<NavItem>
<NavLink
className=classnames( active: this.state.activeTab === "4", "nav-link": true )
onClick=() => this.toggleTab("4");
to="#">
OTHER
</NavLink>
</NavItem>
</Nav>
<br />
<br />
<br />
<TabContent activeTab=this.state.activeTab>
<TabPane tabId="1">
<Row>
<Colxx xxs="12" lg="5" xl="4" className="col-left">
<SingleLightbox thumb="/assets/img/profile-pic-l.jpg" large="/assets/img/profile-pic.jpg" className="img-thumbnail card-img social-profile-img" />
<Card className="mb-4">
<CardBody>
<div className="text-center pt-4">
<p className="list-item-heading pt-2"></p>
</div>
<p className="text-muted text-small mb-2"><IntlMessages id="pages.location" /></p>
<p className="mb-3"></p>
<p className="text-muted text-small mb-2">Email</p>
<p className="mb-3"></p>
<p className="text-muted text-small mb-2">Phone Number</p>
<p className="mb-3"></p>
<p className="text-muted text-small mb-2">Date of Birth</p>
<p className="mb-3">10/13/1998</p>
<p className="text-muted text-small mb-2">VIP?</p>
<p className="mb-3"></p>
<p className="text-muted text-small mb-2">Points</p>
<p className="mb-3"></p>
</CardBody>
</Card>
<Card className="mb-4">
<CardBody>
<p className="text-muted text-small mb-2">
Reviews
</p>
<div className="mb-3">
<p><b>Paris Scottsdale</b></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque quis cursus mauris</p>
<Rating total=5 rating=4 interactive=false />
</div>
<div className="mb-3">
<p><b>Paris Scottsdale</b></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque quis cursus mauris</p>
<Rating total=5 rating=1 interactive=false />
</div>
<div className="mb-3">
<p><b>Paris Scottsdale</b></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque quis cursus mauris</p>
<Rating total=5 rating=5 interactive=false />
</div>
<div className="mb-3">
<p><b>Paris Scottsdale</b></p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque quis cursus mauris</p>
<Rating total=5 rating=5 interactive=false />
</div>
</CardBody>
</Card>
</Colxx>
<Colxx xxs="12" lg="7" xl="8" className="col-right">
posts.map((itemData) =>
return <Post data=itemData key=itemData.key className="mb-4" />
)
</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">
Purchases
</h3>
<div className="mb-3">
<p><b>INTL - 10/20/19</b></p>
<p>$50.00</p>
</div>
<div className="mb-3">
<p><b>Day N Vegas - 10/20/19</b></p>
<p>$500.00</p>
</div>
<div className="mb-3">
<p><b>ClubX VIP - 10/20/19</b></p>
<p>$39.99</p>
</div>
<div className="mb-3">
<p><b>INTL - 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>Redeemed</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>
);
export default injectIntl(EditUser);
我已经尝试了过去所有有效的方法，但仍然没有成功。我的主要目标是能够在此页面上显示所有用户数据。
答案
这可能是因为您期望的json不是数组，请在调用componentDidMount之前第一次检查renderUser（）的时间。
以上是关于TypeError：this.state.users.map不是函数reactjs的主要内容，如果未能解决你的问题，请参考以下文章