React中使用map遍历数组无法渲染元素，console.log正常输出

你的问题核心是数组map回调没有返回JSX元素——console.log能正常输出说明数据已正确获取，但渲染时因为没有返回元素，所以页面无法显示内容。

修复步骤 #

在map的回调函数里，有两种方式解决：

• 给JSX代码加上return关键字
• 把包裹回调的大括号{}换成小括号()（小括号会自动返回内部的表达式）

修改后的完整代码 #

const [article, setArticle] = useState([])

useEffect(() => {
    axios.get(link).then((res) => {
        // 原代码里的map、push、flat都是冗余操作，直接赋值res.data即可
        setArticle(res.data)  
    })
}, [])

// 方式1：添加return
let text = article.map( (element,i) =>{
    console.log(i,element.feed)
    return <p key={i}>{element.feed} </p> 
})

// 方式2：用小括号替代大括号（更简洁）
// let text = article.map( (element,i) => (
//     <p key={i}>{element.feed} </p> 
// ))

return text; 

额外优化提示 #

1. 原axios请求中的element.data.map(element => element)属于无意义操作，直接使用res.data就能拿到目标数组
2. 渲染列表时必须给每个元素添加唯一key（示例用索引i作为临时方案，生产环境建议使用数据自带的唯一ID，比如element.id），避免React的性能警告

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