React/Next.js可正常console.log获取数据但无法在页面渲染如何解决

核心错误 #

你的代码中Array.map()的回调函数没有返回JSX元素：在map内使用了花括号{}包裹逻辑，但没有编写return语句，导致map最终返回的数组全是undefined，所以页面不会渲染任何内容。

其他可优化的隐患点 #

• 没有引入React的useState和useEffect钩子，Next.js旧版本如果未开启自动引入React配置会直接报错
• 访问嵌套属性post.featuredImage.url时没有做空判断，如果某篇文章未设置封面图会抛出渲染异常，导致整体组件崩溃

修复后完整代码 #

// 补全React及钩子引入
import React, { useState, useEffect } from 'react'
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>
            {/* 用圆括号代替花括号实现JSX隐式返回，同时添加可选链做空判断 */}
            {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

map写法补充说明 #

两种合法的map返回写法可以按需选择：

• 隐式返回：arr.map(item => (<div>...</div>))，箭头函数后接圆括号，不需要写return，适合直接返回JSX的场景
• 显式返回：arr.map(item => { return <div>...</div> })，如果map回调内有其他逻辑需要处理，就保留花括号手动添加return语句

内容的提问来源于stack exchange，提问作者ITACS