React类组件转函数式组件后图片映射失败无法显示如何解决？

问题原因 #

属性名字大小写不匹配是导致图片无法显示的核心原因：
你在directory-data.jsx中定义的图片地址字段为小写u的imageUrl，但在directory.component.jsx中遍历数组时，错误解构了大写U的imageURL，这个字段不存在，因此传给MenuItem组件的imageUrl值为undefined，背景图自然无法渲染，标题可以正常显示是因为title字段的名称没有写错。

修正方案 #

修改directory.component.jsx中map方法的解构代码，将imageURL改为imageUrl即可：

// 修正后的directory.component.jsx
import React from 'react'
import { sections } from './directory-data'
import MenuItem from '../menu-item/menu-item.component'
import './directory.styles.scss'

export const Directory = () => {
  return (
    <div className='directory-menu'>
      {sections.map(({ title, imageUrl, id }) => (
        <MenuItem key={id} title={title} imageUrl={imageUrl} />
      ))}
    </div>
  )
}

可选修正项 #

你在homepage.component.jsx中引入的样式文件名称写为hompage.styles.scss，疑似少写了字母e，正确应为homepage.styles.scss，若实际本地文件名是带e的，建议同步修正避免样式加载失败。

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