React导入图片并通过Props传递失效问题排查

尝试导入图片存入数组，通过props传递给组件展示图片，但组件中从数组取元素时返回undefined，控制台打印数组显示为对象数组而非预期的字符串路径，直接传入路径字符串也有同样问题。

代码示例 #

App.jsx #

import { useState, useRef } from "react";
import TransparentMenuBar from "./components/TransparentMenuBar.jsx";
import SlideShow from "./components/SlideShow.jsx";

// Images
import signupScreen from "./assets/SignUpScreen.png";
import racesScreen from "./assets/RacesScreen.png";
import racersScreen from "./assets/RacersScreen.png";

import "./App.css";

const raceImages = [signupScreen, racesScreen, racersScreen];

function App() {
  const homeRef = useRef(null);
  const aboutmeRef = useRef(null);
  const projectsRef = useRef(null);
  const experienceRef = useRef(null);

  return (
    <main>
      <section>
         <SlideShow images={raceImages}></SlideShow>
      </section>
    </main>
  );
}

export default App;

SlideShow.jsx #

import { useState } from "react";
import "./SlideShow.css";

export default function SlideShow(images) {
  const [currentImage, setCurrentImage] = useState(images[0]);

  console.log(`Current Image: ${currentImage}`);
  console.log(`Images: ${images}`);
  console.log(`Images[0]: ${images[0]}`);
  return (
    <div>
      <img src={images[0]} />
    </div>
  );
}

错误原因 #

核心问题是SlideShow组件没有正确解构props。React组件的第一个参数是包含所有传入属性的props对象，而非直接接收单个属性。你现在写function SlideShow(images)，这里的images其实是整个props对象，而非你传入的images数组。因此访问images[0]时，相当于在props对象上取索引0，必然返回undefined。

修复方案 #

方案1：解构props对象 #

直接从props中提取images属性：

import { useState } from "react";
import "./SlideShow.css";

export default function SlideShow({ images }) {
  const [currentImage, setCurrentImage] = useState(images[0]);

  console.log(`Current Image: ${currentImage}`);
  console.log(`Images: ${images}`);
  console.log(`Images[0]: ${images[0]}`);
  return (
    <div>
      <img src={images[0]} />
    </div>
  );
}

方案2：通过props对象访问属性 #

保留完整props对象，通过.访问目标属性：

import { useState } from "react";
import "./SlideShow.css";

export default function SlideShow(props) {
  const [currentImage, setCurrentImage] = useState(props.images[0]);

  console.log(`Current Image: ${currentImage}`);
  console.log(`Images: ${props.images}`);
  console.log(`Images[0]: ${props.images[0]}`);
  return (
    <div>
      <img src={props.images[0]} />
    </div>
  );
}

补充说明 #

导入图片时，React会将其处理为模块资源，最终转化为对应的URL字符串，因此你的raceImages数组本身是正常的，只要组件正确接收props就能正常展示图片。

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