我如何使用 map() 来显示来自 API 的数据？

Question

我正在尝试显示我 API 中一篇文章的评论。所以我用地图来显示我的评论。当我控制台记录我的评论时，我承诺会显示我的 API.

评论中的所有数据

当我使用 comments.map() 时，出现以下错误：

我以为我必须通过“结果”和“数据”。我控制台登录 comments.result.data 以便通过地图使用它，但我没有数据，它是空的...

这是评论的控制台日志：

import React, { useEffect, useState } from 'react'
import { useParams, Link } from 'react-router-dom'
import { API_URL } from '../config'
import { Skeleton } from '@material-ui/lab'
import { Grid, Button } from '@material-ui/core'
import { AiFillCaretLeft } from "react-icons/ai"
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemText from '@material-ui/core/ListItemText'
import ListItemAvatar from '@material-ui/core/ListItemAvatar'
import Avatar from '@material-ui/core/Avatar'
import Typography from '@material-ui/core/Typography'
import CommentForm from '../Components/Forms/CommentForm'
import PostsAPI from '../Services/PostsAPI'
import CommentsAPI from '../Services/CommentsAPI'

export default function PostPage() {

    const {id} = useParams()
    const [post, setPost] = useState(null)
    const [isLoading, setIsLoading] = useState(false)
    const [comments, setComments] = useState([])
    console.log(comments)

    useEffect(() => {
        fetchPost();
        fetchComments();
    }, [])

    const fetchPost = async () => {
        const data = await PostsAPI.findOne(id);
        setPost(data)
        setIsLoading(true)
    }

    const fetchComments = async () => {
        try{
            const comments = await CommentsAPI.findAll()
            setComments(comments.data)
        } catch (error) {
            console.log(error)
        }
    }

    return (
        <div>
            <nav>
                <Link to="/">
                    <Button variant="contained" color="primary"><AiFillCaretLeft /><span>Back</span></Button>
                </Link>
            </nav>
            <Grid container spacing = {2}>
                <Grid item sm={6}>
                    <div className='postImg'>
                        {isLoading ? <img src={API_URL + post.data.attributes.image.data[0].attributes.formats.small.url} alt={post.data.attributes.title} /> : <Skeleton variant="rect" width="100%" height={400} />}
                    </div>
                </Grid>
                <Grid item sm={6}>
                    <h1>{isLoading ? post.data.attributes.title : <Skeleton variant="text" width={300} height={80} />}</h1>
                    <p>{isLoading ? post.data.attributes.content : 
                        <>
                            <Skeleton variant="text" height={25}/>
                            <Skeleton variant="text" width="60%" height={25}/>
                        </>
                    }</p>
                </Grid>
            </Grid>
            <Grid container spacing={2}>
                <Grid item md={6}>
                    <CommentForm />
                </Grid>
                <Grid item md={6}>
                    {<List>
                        {comments.map((comment, i) => (
                            <ListItem key={i} alignItems="flex-start">
                                <ListItemAvatar>
                                <Avatar alt="Avatar" src="/static/images/avatar/1.jpg" />
                                </ListItemAvatar>
                                <ListItemText
                                primary="Brunch this weekend?"
                                secondary={
                                    <React.Fragment>
                                    <Typography
                                        component="span"
                                        variant="body2"
                                        color="textPrimary"
                                    >
                                        {comment.pseudo}
                                    </Typography>
                                    {comment.content}
                                    </React.Fragment>
                                }
                                />
                            </ListItem>
                        ))}
                    </List>}
                </Grid>
            </Grid>
        </div>
    )
}

Answer 1

我真的看不到你的对象包含什么，但你想使用我假设的那些值吗？

array.map((item, i) => {
return (
<p>{item.property}</p>
//...whatever more here...
);
}

如果您能向我们展示每个对象包含的任何属性，将会很有帮助。 :)

Answer 2

comments.results 计算结果为未定义，因为 results 属性不存在

试试 comments.map(...) 代替：

                    {comments.map(comment => (
                        <ListItem alignItems="flex-start">
                            <ListItemAvatar>
                            <Avatar alt="Avatar" src="/static/images/avatar/1.jpg" />
                            </ListItemAvatar>
                            <ListItemText
                            primary="Brunch this weekend?"
                            secondary={
                                <React.Fragment>
                                <Typography
                                    component="span"
                                    variant="body2"
                                    color="textPrimary"
                                >
                                    {comment.attributes.pseudo}
                                </Typography>
                                {comment.attributes.content}
                                </React.Fragment>
                            }
                            />
                        </ListItem>
                    ))}

我如何使用 map() 来显示来自 API 的数据？

How can I use map() to show my datas from API?

api

dictionary

reactjs