마윤경
Published in : 2022-04-22
Hi everyone. I'm not learning React, so I'm having a hard time with this code.
It has been confirmed that the data is coming from DB well. But it doesn't show up in the view.
I tried to use Object for map because list is not an array, but there was no change.
Does anyone know what the problem is?
this is the code:
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([]); useEffect(() => { axios.get('//localhost:5000/post/community').then((res) => { setList(res.data); console.log(res.data); console.log(list); }) },[]) 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' }}>Writer</TableCell> </TableRow> </TableHead> {Object.values(list).map((e) => { <TableBody> <TableRow key={e.post_id}> <TableCell component="th" scope="row">{e.post_id}</TableCell> <TableCell component="th" scope="row">{e.title}</TableCell> <TableCell component="th" scope="row">{e.writer}</TableCell> </TableRow> </TableBody> })} </Table> </TableContainer> </div> ); }
Join our community and get the chance to solve your code issues & share your opinion with us
Sign up Now
Mohamed Atef Date : 2022-04-22
Best answers
51
Best answers
51
From what I see in the code you are not using the correct Object and you are not returning the value of the map function you should use list as the object which contains data and also use “return” to print the result of the map function so the map code should looks like
Or you can use the function of map without the { } to return the value like this (not that after => there are no “{” )
also, you can test it using console.log before the component return like
so if you want the entire code
Good luck
마윤경 Date : 2022-04-23
I tried following this code, but I get <<TypeError: list.values(...).map is not a function>>, <<The above error occurred in the <Community> component:>> error.
Mohamed Atef Date : 2022-04-23
If you take a look at the console.log result from the attached screenshot you will find that the array called result so you should set the value of the state to be the value of “result” (the array) the useEffect function should looks like this
Let me know if it works for you