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

Posted 2023-02-22

【中文标题】TypeError：accounts.map不是一个函数[关闭]

【英文标题】：TypeError: accounts.map is not a function [closed]

【发布时间】：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 状态不可见在功能组件中，但不知道如何修复它。

【参考方案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