React中从JS对象取数并通过Props传值无显示问题排查

问题描述 #

目标是从JavaScript文件中获取数据，通过React将数据传递给项目中的另一个组件。VS Code无语法报错，但页面无内容显示，控制台出现报错。相关信息如下：

控制台错误 #

文件结构 #

相关代码 #

JavaScript数据文件（data.js）

export default data = [
{
    id:1,
    url:"../public/MainCardImages/hiphopMainCard.png",
    description:"HipHopCard",
    title:"Hip Hop",
},
{
    id:2,
    url:"../public/MainCardImages/houseMainCard.png",
    description:"House Card",
    title:"House",
    }
]

主组件App.js

import Data from "./data"
import MainCard from './components/MainCard'
function App() {
  const mainCards = Data.map(card => {
    return(
      <MainCard 
          image={card.url}
          key={card.id}
          title={card.title}
      />

    )
  })
  return (
    <div className="App">
      {mainCards}
   </div>
  )
}

export default App

MainCard组件（components/MainCard.js）

function MainCard(props){
    return(
        <div className="mainCard">
            <img src={props.image} />
        </div>
    )
}

export default MainCard

错误原因及修复方案 #

1. 数据文件导出语法错误 #

控制台报错data is not defined，是因为导出时未正确声明变量。JavaScript严格模式下不允许隐式全局变量，修改data.js为以下任意一种写法：

// 方式一：声明变量后导出
const data = [
{
    id:1,
    url:"/MainCardImages/hiphopMainCard.png",
    description:"HipHopCard",
    title:"Hip Hop",
},
{
    id:2,
    url:"/MainCardImages/houseMainCard.png",
    description:"House Card",
    title:"House",
    }
]
export default data

// 方式二：直接导出数组
export default [
{
    id:1,
    url:"/MainCardImages/hiphopMainCard.png",
    description:"HipHopCard",
    title:"Hip Hop",
},
{
    id:2,
    url:"/MainCardImages/houseMainCard.png",
    description:"House Card",
    title:"House",
    }
]

2. 图片路径错误 #

React项目中，public目录下的资源需使用绝对路径（以/开头），因为打包后public文件夹会作为静态资源根目录。将url中的../public/替换为/，确保图片能正确加载。

3. 验证修复 #

修改完成后，App组件可正常导入数据并渲染MainCard组件，页面将显示预期内容。

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