React中使用array.map()渲染图片出现白屏问题如何解决

问题结论 #

React完全支持使用array.map()遍历渲染图片，你遇到的白屏问题和map方法本身无关，是代码存在多处语法和使用规范错误导致渲染异常，进而触发页面崩溃。

白屏具体原因 #

• 核心错误是img标签使用不规范：React中img属于自闭合标签，图片地址必须赋值给src属性，不能写在标签内部当成子元素。你写的<img>图片地址</img>属于严重语法错误，会直接触发React渲染异常，导致整个根节点卸载白屏。
• map返回值结构错误：你在map的回调里用方括号包裹返回的JSX，相当于返回了嵌套数组，最终forecast状态是二维数组，会进一步加剧渲染异常。
• key属性放置错误：React要求列表的key要加在map遍历返回的最外层根元素上，你把key加在内部的li、img标签上，属于不规范使用，也可能触发渲染异常。
• HTML语义化错误：li标签必须作为ul/ol的直接子元素，你直接把li放在div中，不符合HTML规范，可能产生未知渲染问题。

修复方案 #

1. 修改状态赋值逻辑 #

把原来的setForecast代码替换为以下内容：

setForecast(res2.data.list.map(item => (
  // key加在map返回的最外层元素上，用圆括号包裹返回的单个JSX元素
  <div className="each_data_point" key={item.dt_txt}>
    <p className="date_time">{`Date & Time: ${item.dt_txt}`}</p>
    {/* img用自闭合写法，图片地址赋值给src属性，补充alt属性优化可访问性 */}
    <img 
      className="icon" 
      src={`https://openweathermap.org/img/w/${item.weather[0].icon}.png`}
      alt="天气图标"
    />
    <p className="main_temp">{`Temp: ${item.main.temp}`}</p>
  </div>
)))

2. 优化渲染逻辑 #

p标签内不能放置块级元素，直接渲染forecast即可：

return (
  <div>
    <div className="five_day_forecast">
      <div className="temp_body">
        {forecast}
      </div>
    </div>
  </div>
)

额外优化建议：更推荐在状态中只存储接口返回的原始数据，在渲染阶段再遍历生成JSX，不要把JSX存入状态，能有效降低状态维护成本，避免不必要的渲染异常

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