React应用中fetch获取的后端数据控制台可打印但前端不显示如何解决

1. 核心问题排查 #

• Array.map()的回调函数没有返回值：你在map内用大括号包裹逻辑时没有加return语句，React无法拿到要渲染的元素，所以页面无内容展示。
• 后端返回的是HTML格式字符串，不能直接插值渲染：React默认会把HTML标签当作普通文本转义，需要用dangerouslySetInnerHTML属性注入原生HTML内容。
• 补充说明：useEffect中setData后立即打印data拿到的是旧值，这是React state更新的异步特性导致的，属于正常现象，不影响实际渲染。

2. 修复后的完整代码 #

import {useState, useEffect} from 'react';
import './App.css';

function App() {
  const [data,setData] = useState([])
  useEffect( () => {
    fetch("http://127.0.0.1:5000/lang")
    .then(res =>  res.json())
    .then( res => {
      setData(res)
      // 如需查看更新后的数据可在此处打印，或单独写useEffect监听data变化
      console.log('接口返回数据：', res)
    })
  }, [] )
  return (
    <div className="App">
        {
        data.map((item,i) => (
          // 此处用小括号代替大括号可默认return内部元素，也可改用大括号+return的写法
          // 如果你后端返回的字段名不是content，替换为实际字段名即可；如果接口直接返回HTML字符串数组，直接写__html: item
          <div key={i} dangerouslySetInnerHTML={{__html: item.content}} />
        ))
      }
    </div>
  );
}

export default App;

3. 注意事项 #

• 列表渲染的元素需要加key属性，可避免React抛出key缺失警告，静态无变化的列表可以用索引作为key，动态列表建议用数据内的唯一id作为key。
• dangerouslySetInnerHTML存在XSS攻击风险，如果后端返回的HTML是用户可编辑的内容，需要提前做好内容安全过滤再返回前端。

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