Ошибка типа: this.state.regrex.map не является функцией

Question

Я использую react с пользовательским API и получаю ошибку Ошибка типа: this.state.regrex.map не является функцией . когда я получаю данные из API, то получается ошибка TypeError: this.state.regrex.map не является функцией

 import React, { Component } from 'react'
    import ApiService from "../../service/ApiService";
    import Table from '@material-ui/core/Table';
    import TableBody from '@material-ui/core/TableBody';
    import TableCell from '@material-ui/core/TableCell';
    import TableHead from '@material-ui/core/TableHead';
    import TableRow from '@material-ui/core/TableRow';
    import Button from '@material-ui/core/Button';
    import CreateIcon from '@material-ui/icons/Create';
    import DeleteIcon from '@material-ui/icons/Delete';
    import Typography from '@material-ui/core/Typography';

    class ListUserComponent extends Component<any,any>{

        constructor(props: any){
            super(props)
            this.state = {
                users: [],
                regrex: [],
                category: null,
                message: null
            }
            this.deleteUser = this.deleteUser.bind(this);
            this.editUser = this.editUser.bind(this);
            this.addUser = this.addUser.bind(this);

            this.fetchCategoryList = this.fetchCategoryList.bind(this); 

            this.reloadUserList = this.reloadUserList.bind(this);
        }

        componentDidMount() {
            this.reloadUserList();

            this.fetchCategoryList(this.requesDATA());
            console.log('govind'+this.fetchCategoryList(this.requesDATA()));
        }

    requesDATA()
    {
        let data1= {"scSymbol":"ACC"};
        return data1;
    }

        fetchCategoryList(category: any) {
            ApiService.fetchCategory(category)
                .then((res) => {
                    this.setState({regrex: res.data})
                });
        }

        reloadUserList() {
            ApiService.fetchUsers()
                .then((res) => {
                    this.setState({users: res.data})
                });
        }

        deleteUser(userId: any) {
            ApiService.deleteUser(userId)
               .then(res => {
                   this.setState({message : 'User deleted successfully.'});
                   this.setState({users: this.state.users.filter((user: { id: any; }) => user.id !== userId)});
               })
        }

        editUser(id: any) {
            window.localStorage.setItem("userId", id);
            this.props.history.push('/edit-user');
        }

        addUser() {
            window.localStorage.removeItem("userId");
            this.props.history.push('/add-user');
        }

        render() {
            return (
                <div>
                    <Typography variant="h4" style={style}>User Details</Typography>
                    <Button variant="contained" color="primary" onClick={() => this.addUser()}>
                        Add User
                    </Button>

                    <Table>
                        <TableHead>
                            <TableRow>
                                <TableCell>Id</TableCell>
                                <TableCell>category</TableCell>
                                <TableCell align="right">image</TableCell>
                            </TableRow>
                        </TableHead>


                        <TableBody>
                            {this.state.regrex && this.state.regrex.map((row: any) => (
                                <TableRow>
                                    <TableCell component="th" scope="row">
                                        {row.categoryId}
                                    </TableCell>
                                    <TableCell align="right">{row.category}</TableCell>
                                    <TableCell align="right">{row.image}</TableCell>
                                </TableRow>
                            ))}
                        </TableBody>

                    </Table>

                </div>
            );
        }

    }

    const style ={
        display: 'flex',
        justifyContent: 'center'
    }

    export default ListUserComponent;

Answer 1

Во-первых, убедитесь, что результатом res.data является массив

fetchCategoryList(category: any) {
            ApiService.fetchCategory(category)
                .then((res) => {
                    this.setState({regrex: res.data}) // make sure that res.data is an array
                });
        }

Во-вторых, измените проверку состояния, если это массив, так что вы можете использовать map с ним

 {Array.isArray(this.state.regrex) && this.state.regrex.map((row: any) => (
                                <TableRow>
                                    <TableCell component="th" scope="row">
                                        {row.categoryId}
                                    </TableCell>
                                    <TableCell align="right">{row.category}</TableCell>
                                    <TableCell align="right">{row.image}</TableCell>
                                </TableRow>
                            ))}

надеюсь, это поможет

Answer 2

Иногда это происходит, когда вы используете setState в синхронном порядке, но так как setState носит асинхронный характер. Вы можете вызвать следующую функцию в callback предыдущего setState.

Например:

componentDidMount() {
            this.reloadUserList();
            }

reloadUserList() {
    ApiService.fetchUsers()
       .then((res) => {
          this.setState({users: res.data},()=>{
                 this.fetchCategoryList(this.requesDATA());
                 console.log('govind'+this.fetchCategoryList(this.requesDATA()));
             })
       });
  }