TypeError：this.state.users.map 不是函数 reactjs

Question

我正在尝试在页面上显示用户信息，但在使用 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);

我已经尝试了过去所有可行的方法，但仍然没有成功。我的主要目标是能够在此页面上显示所有用户数据。

Answer 1

这可能是因为您期望的 json 不是数组，请在调用 componentDidMount 之前检查第一次调用 renderUser() 的时间。