TypeError：accounts.map不是一个函数[关闭]答案

【问题标题】：TypeError: accounts.map is not a function [closed]TypeError：accounts.map不是一个函数[关闭]
【发布时间】：2020-06-24 03:40:09
【问题描述】：

获取 TypeError：accounts.map 不是函数

   import React from 'react';
    import {  withRouter } from "react-router-dom";
    import { connect } from 'react-redux';
    import {List} from 'immutable';
    import {
      Table,
      Container,
      Row,
      Col,
      ButtonToolbar,
      Button
    } from 'react-bootstrap';
    import history from '../../history';
    //import {accountselector} from '../../features/account';

      const UserList = (accounts) => {

      const gotoCreate = ()=>{
        history.push("/user-create");
      };

      const renderTableData = ()=>{
        return accounts.map((user, index) => {
          const {id, firstName, lastName, email, mobile} = user;
          return (
            <tr key={index}>
              <td>{id}</td>
              <td>
                {firstName} {lastName}
              </td>
              <td>{email}</td>
              <td>{mobile}</td>
            </tr>
          );
        });
      };


        return (
          <Container>
             <Container>
            <ButtonToolbar>
      <Button variant="secondary" onClick={gotoCreate}>Create</Button>

    </ButtonToolbar>
    </Container>
          <Container>
    <Row>
      <Col></Col>
      <Col xs={6} align="center" style={{fontSize:"x-large","fontWeight": "bold"}}>User list</Col>
      <Col></Col>
    </Row>
    </Container>
          <Container>
            <Table responsive>
              <thead>
                <tr>
                  <th>#id</th>
                  <th>name</th>
                  <th>email</th>
                  <th>mobile</th>
                </tr>
              </thead>
              <tbody>{renderTableData()}</tbody>
            </Table>
          </Container>
          </Container>
        );
    }
    function mapStateToProps(state) {
      return { accounts: state.acc.accounts || List()}
    }


    export default connect(
      mapStateToProps,
      null
    )( withRouter(UserList))


export const accountsInitialState = Map({
        accounts: List(),
});


export const accountReducer=(state = accountsInitialState, action) => {
  console.log(action.type);
  switch (action.type) {

    case LIST_ACCOUNT_COMPLETED:
      state = state.set('accounts',action.payload.data.content);
      return state;

    default:
      return state;
  }
};

【问题讨论】：

看来accounts 不是一个数组.. 你能把accounts 的数据贴在你做map 之前收到的数据吗？？
@Maniraj Murugan 我用空列表更改了它仍然不起作用 function mapStateToProps() { return { accounts: List()} } 或 accounts: [] ，我看到的问题是 redux 状态不可见在功能组件中，但不知道如何修复它。

标签： javascript arrays reactjs redux react-redux

【解决方案1】：

map 是一个数组的原型。仅当 accounts 是一个数组时才遍历它。因此，修改您的代码如下：

Array.isArray(accounts) && accounts.map((user, index) => { ... code });

另外，如下更改mapStateToProps

function mapStateToProps(state) {
const listOfAccounts = (state.acc && state.acc.accounts) ? state.acc.accounts : [];
      return { 
          accounts: listOfAccounts 
      }
}

【讨论】：