마윤경
Published in : 2022-04-22

React usestate array map() is not working

React js

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> ); }

 

Comments

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 

{list.values(list).map((e) => { return ( <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> );})}

Or you can use the function of map without the { } to return the value like this (not that after => there are no “{” )

{list.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>})}

also, you can test it using console.log before the component return like 

console.log(list); return ( <div> <Navbar /> .....

so if you want the entire 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); }) },[]) 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> {list.values(list).map((e) => { return ( <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> ); }

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

 useEffect(() => { axios.get('//localhost:5000/post/community').then((res) => { //Note that i added the array from the response res.data.result setList(res.data.result); console.log(res.data); //This should print array console.log(res.data.result); }) },[])

Let me know if it works for you

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

[solved] Render/Show a custom option in Autocomplete Material UI?
Publish date: 2021-12-22 | Comments: 2

Tag: React js

[Solved] Cannot read properties of null (reading 'getBoundingClientRect')
Publish date: 2021-12-02 | Comments: 2

Tag: React js

TypeError: Super expression must either be null or a function
Publish date: 2022-03-13 | Comments: 2

Tag: React js

import link as router link from 'react-router-dom' Reactjs
Publish date: 2021-09-30 | Comments: 3

Tag: React js

How to use SetFieldValue from outside render function? Formik
Publish date: 2021-07-03 | Comments: 2

Tag: React js

React Component displaying a list of lines
Publish date: 2022-03-19 | Comments: 3

Tag: React js