마윤경

22 Apr 2022

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

22 Apr 2022

githubgithubgithub

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

Replies

마윤경

23 Apr 2022

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

23 Apr 2022

githubgithubgithub

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

© 2024 Copyrights reserved for web-brackets.com