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

Posted 2023-02-19

【中文标题】无法在 react/next js 中获取数据，尽管能够控制台记录它

【英文标题】：Not able to fetch data in react/next js although able to console log it

【发布时间】：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 
                         />
                    </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它也不起作用。

【参考方案1】：

relatedPosts.map((post) => (
                <div key=post.slug>
                    <div className="image">
                        <img 
                        src=post.featuredImage.url 
                         
                        />
                    </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) ) ✔