无法在 react/next js 中获取数据，尽管能够控制台记录它答案

【问题标题】：Not able to fetch data in react/next js although able to console log it无法在 react/next js 中获取数据，尽管能够控制台记录它
【发布时间】：2021-12-24 20:56:24
【问题描述】：

我在这里使用 Next Js (React Js) 开发我的 Web 应用程序，我还使用 graphql 从数据库中获取我的数据我也得到它但无法在屏幕上呈现它。我该怎么办！

import Link from 'next/link'
import moment from 'moment'

import {getRecentPosts , getSimilarPosts} from '../../services'

const PostWidget = ({categories , slug}) => {

    const [relatedPosts, setRelatedPosts] = useState([])

    useEffect(() => {
        if(slug){
            getSimilarPosts(categories, slug).then((result) => setRelatedPosts(result))
        }
        else{
            getRecentPosts().then((result) => setRelatedPosts(result))
        }
       
    }, [slug])
    return (
        <div>
            <h3>
                {slug ? "Related Posts" : "Recent Posts"}
            </h3>
            {relatedPosts.map((post) =>{
                <div key={post.slug}>
                    <div className="image">
                        <img 
                        src={post.featuredImage.url} 
                        alt="" />
                    </div>
                    <div className="content">
                        <p>{moment(post.createdAt).format('MMM DD, YYYY')}</p>
                        <h3>{post.title.toString()}</h3>
                    </div>
                </div>
            })}
        </div>
    )
}

export default PostWidget

当我 console.log(relatedPosts) 时，我能够获取 json 格式的数据，但是当我尝试像上面那样使用它时，我没有得到帖子信息，也无法在我的网页中显示我的数据

【问题讨论】：

修复您问题上的代码并与邮递员一起尝试该服务以验证它是否正常工作
@JRichardsz 我试过了，它不起作用我无法在屏幕上显示数据，尽管可以将其记录到控制台
如果返回相关帖子的http服务不起作用，那么react它也不起作用。

标签： reactjs json next.js console.log

【解决方案1】：

{relatedPosts.map((post) => (
                <div key={post.slug}>
                    <div className="image">
                        <img 
                        src={post.featuredImage.url} 
                        alt="" 
                        />
                    </div>
                    <div className="content">
                        <p>{moment(post.createdAt).format('MMM DD, YYYY')}</p>
                        <h3>{post.title}</h3>
                    </div>
                </div>
            ))}

因为我插入了一个{花括号}而不是一个（括号）： (post)=>{ code/JSX } ❌ 我们可以通过两种方式纠正这个问题： (post)=>{ return ( code/JSX )} ✔ 或 (post)=>( code/ JSX(react/next) ) ✔

【讨论】：