React从data.js导出数据经Props传递时页面异常问题求助

我需要从data.js文件中获取数据，通过React的Props传递给其他组件。当前Web应用的导航栏（粉色边框标注）显示正常，但取消注释data.js中的导航栏图标代码块后，页面出现异常。我的目标是让异常状态中显示的图标正常出现在正常状态的页面导航栏里，但找不到问题所在。

相关代码 #

data.js #

const data=[
    {
        id:1,
        url:"/public/MainCardImages/hiphopMainCard.png",
        playbutton:"/src/assets/playbutton.png",
        addbutton:"/src/assets/addbutton.png",
        description:"HipHopCard",
        title:"Hip Hop",
    },
    {
        id:2,
        url:"/public/MainCardImages/houseMainCard.png",
        playbutton:"/src/assets/playbutton.png",
        addbutton:"/src/assets/addbutton.png",
        description:"House Card",
        title:"House",
    },
    {
        id:3,
        url:"/public/MainCardImages/popMainCard.png",
        playbutton:"/src/assets/playbutton.png",
        addbutton:"/src/assets/addbutton.png",
        description:"Pop Card",
        title:"Pop",
    },
    {
        id:4,
        logoUrl:"/CloneifyLogos/CloneifyLogo.png",
        logoTitle:"Cloneify",
    },
    // {
    //     id:7,
    //     iconUrl:"/navbarIcons/HomeIcon.png",
    //     iconTitle:"Home",
    // },
];
export default data;

App.jsx #

import React from 'react'
import './App.css'
import Navbar from './components/Navbar'
import Header from './components/Header'
import CardContainer from './components/CardContainer'
// import SideCard from './components/SideCard'
import Data from "./data"
import MainCard from './components/MainCard'
function App() {
  const navbarIcons = Data.map(icon =>{
    return(
      <Navbar 
        key={icon.id}
        icon={icon.iconUrl}
        title={icon.iconTitle}
      />
    )
  })
  const mainCards = Data.map(card => {
    return(
      <MainCard 
          image={card.url}
          key={card.id}
          title={card.title}
          playbutton={card.playbutton}
          addbutton={card.addbutton}
      />
    )
  })
  const cloneify = Data.map(logo =>{
    return(
      <Header 
        key={logo.id}
        logo={logo.logoUrl}
        title={logo.logoTitle}
      />
    )
  })
  

  return (
    <div className="App">
      {navbarIcons}
      {cloneify}
      
      <CardContainer />
      <div className="maincards">
          {mainCards}
      </div>
    </div>
  )
}

export default App

Navbar组件 #

function Navbar(props){
    return(
        <div className='navbar'>
            <img src={props.icon} />
            <hr className="navbar-divider"></hr>
        </div>
    )
}
export default Navbar

问题原因 #

1. 遍历逻辑错误：你对整个Data数组做了三次map遍历，导致所有数据项都会被强制渲染成Navbar、MainCard和Header组件。取消注释导航栏图标后，这个图标项会被同时塞进三个渲染集合，因为它没有url、logoUrl等属性，会生成空组件，直接破坏页面布局。
2. 资源路径可能错误：图标路径/navbarIcons/HomeIcon.png不符合React静态资源规范，若资源放在public目录下，路径应改为/public/navbarIcons/HomeIcon.png；若放在src/assets下，需要通过import引入。

解决方案 #

1. 拆分数据类型，精准遍历 #

修改data.js，按组件类型拆分数据，避免无效遍历：

// data.js
export const mainCardsData = [
    {
        id:1,
        url:"/public/MainCardImages/hiphopMainCard.png",
        playbutton:"/src/assets/playbutton.png",
        addbutton:"/src/assets/addbutton.png",
        description:"HipHopCard",
        title:"Hip Hop",
    },
    {
        id:2,
        url:"/public/MainCardImages/houseMainCard.png",
        playbutton:"/src/assets/playbutton.png",
        addbutton:"/src/assets/addbutton.png",
        description:"House Card",
        title:"House",
    },
    {
        id:3,
        url:"/public/MainCardImages/popMainCard.png",
        playbutton:"/src/assets/playbutton.png",
        addbutton:"/src/assets/addbutton.png",
        description:"Pop Card",
        title:"Pop",
    },
];

export const headerData = {
    id:4,
    logoUrl:"/public/CloneifyLogos/CloneifyLogo.png",
    logoTitle:"Cloneify",
};

export const navbarIconsData = [
    {
        id:7,
        iconUrl:"/public/navbarIcons/HomeIcon.png",
        iconTitle:"Home",
    },
    // 可添加更多导航图标
];

在App.jsx中分别引入对应数据并渲染：

// App.jsx
import React from 'react'
import './App.css'
import Navbar from './components/Navbar'
import Header from './components/Header'
import CardContainer from './components/CardContainer'
// import SideCard from './components/SideCard'
import { mainCardsData, headerData, navbarIconsData } from "./data"
import MainCard from './components/MainCard'

function App() {
  const navbarIcons = navbarIconsData.map(icon =>{
    return(
      <Navbar 
        key={icon.id}
        icon={icon.iconUrl}
        title={icon.iconTitle}
      />
    )
  })

  const mainCards = mainCardsData.map(card => {
    return(
      <MainCard 
          image={card.url}
          key={card.id}
          title={card.title}
          playbutton={card.playbutton}
          addbutton={card.addbutton}
      />
    )
  })

  // Header是单个对象，无需map遍历
  const cloneify = <Header 
      key={headerData.id}
      logo={headerData.logoUrl}
      title={headerData.logoTitle}
    />

  return (
    <div className="App">
      {/* 给导航栏图标加容器，方便样式控制 */}
      <div className="navbar-container">
        {navbarIcons}
      </div>
      {cloneify}
      
      <CardContainer />
      <div className="maincards">
          {mainCards}
      </div>
    </div>
  )
}

export default App

2. 修正资源路径 #

确保静态资源放在public目录下，路径以/public/开头；若放在src/assets，则通过import引入：

// Navbar组件中引入图标示例
import HomeIcon from '../assets/navbarIcons/HomeIcon.png';

function Navbar(props){
    return(
        <div className='navbar'>
            <img src={props.icon || HomeIcon} alt={props.title} />
            <hr className="navbar-divider"></hr>
        </div>
    )
}

3. 完善Navbar组件 #

给图片添加alt属性，避免加载失败时的控制台警告：

function Navbar(props){
    return(
        <div className='navbar'>
            <img src={props.icon} alt={props.title} />
            <hr className="navbar-divider"></hr>
        </div>
    )
}
export default Navbar

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