React map() data not displaying

Question

The data does not appear in the table in the view. Importing data from db was confirmed with the console.enter image description here

If it is simply used as list.map(), an error saying that it is not a function occurs. So list && list.length > 0 ? I am using list.map((e). Or do I have to modify the const [list, setList] = useState code part?

import React, { useEffect, useState } from "react";
import axios from 'axios';
import Navbar from './Navbar';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';

export default function Community() {

    const [list, setList] = useState([{
        inputData: {
            post_id: '',
            title: '',
            writer: ''
        },
    }]);

    useEffect(() => {
        axios.get('http://localhost:5000/post/community').then((res) => {
            console.log("성공");
            console.log(res.data);
            setList(res.data);
        })
    }, [])

    return (
        <div>
            <Navbar />
            <Box>
                <Button sx={{ fontWeight: 'bold' }} href="/newpost">게시글 등록</Button>
            </Box>
            <TableContainer component={Paper}>
                <Table aria-label="simple table">
                    <TableHead>
                        <TableRow>
                            <TableCell sx={{ fontWeight: 'bold' }}>Post_id</TableCell>
                            <TableCell sx={{ fontWeight: 'bold' }}>Title</TableCell>
                            <TableCell sx={{ fontWeight: 'bold' }} align="right">Writer</TableCell>
                        </TableRow>
                    </TableHead>
                    {list && list.length > 0 ? list.map((e) => {
                        return (
                            <TableBody>
                                <TableRow key={e.post_id}>
                                    <TableCell component="th" scope="row">{e.post_id}</TableCell>
                                    <TableCell align="right">{e.title}</TableCell>
                                    <TableCell align="right">{e.writer}</TableCell>
                                </TableRow>
                            </TableBody>
                        )
                    }) : ""}
                </Table>
            </TableContainer>
        </div>
    );

}

According to the image, res.data isn't an array. It's an object. And there's no .length or .map on an object. (You should also be getting a warning about that in the browser console, but since we're only looking at an image we can't scroll down to observe that.) That object has a property called results which is an array. Perhaps that's what you meant to set the state to? setList(res.data.results); ? Which would really just make this kind of a typo, just a mistake in interpreting your own data structure. — David
– David, Commented Apr 22, 2022 at 13:40
@David if it were not an array, this check list && list.length > 0 ? should prevent the execution of list.map() since list.length would be undefined hence he would not receive the map is not a function error. Probably he's missing some important info, but should definitely attach the result of a console.log(list) placed just before the return statement, and check what it displays before and after the fetch call. — Cesare Polonara
– Cesare Polonara, Commented Apr 22, 2022 at 13:45

Matt · Accepted Answer · 2022-04-22 14:03:38Z

1

Your first state is set up wrong which is then causing the map not to update the state data. It will only mutate not update.

Change

    const [list, setList] = useState([{
        inputData: {
            post_id: '',
            title: '',
            writer: ''
        },
    }]);

To this

    const [list, setList] = useState([])

answered Apr 22, 2022 at 14:03

Matt

9316 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React map() data not displaying

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related