React.js根据URL切换图片滑块内容的代码报错问题

核心错误根源 #

• setSource调用方式错误：setSource是React useState返回的状态更新函数，必须以函数调用形式使用（setSource(xxx)），直接赋值setSource = result会覆盖函数引用，触发报错。
• 状态类型不匹配：result是路径字符串（如koblingsskruetraekkere），但source需要的是图片数组，直接赋值字符串会导致后续source.map()调用失败。
• useEffect回调参数错误：第二个useEffect的回调函数不能接收参数，source应从组件state中获取，且依赖数组配置错误，会导致定时器逻辑异常。

修复步骤 #

1. 修正setSource调用方式：改为函数调用形式，同时根据路径字符串映射到对应的图片数组。
2. 建立路径-数组映射表：用对象存储路径与数组的对应关系，避免直接使用字符串作为变量名，提升代码可维护性。
3. 修复自动轮播逻辑：移除useEffect回调的参数，从state获取source，调整依赖数组为[source, index]，同时在切换数据源时重置index为0，防止索引越界。
4. 优化路径判断：使用严格相等===替代==，提升代码严谨性。

完整修复代码 #

import { useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom';
import './slider.css'

// 图片数据统一配置
const sliderData = {
  frontpage: [
    { id: 1, src: require('../../../resources/imgs/clutchscrewdriver/clutchscrewdrivers1.jpg'), alt: 'slidercontent' },
    { id: 2, src: require('../../../resources/imgs/currentscrewdriver/currentcontrolledscrewdrivers2.jpg'), alt: 'slidercontent' },
    { id: 3, src: require('../../../resources/imgs/transducerscrewdriver/transducerizedscrewdrivers3.jpg'), alt: 'slidercontent' },
  ],
  koblingsskruetraekkere: [
    { id: 1, src: require('../../../resources/imgs/clutchscrewdriver/clutchscrewdrivers1.jpg'), alt: 'slidercontent' },
    { id: 2, src: require('../../../resources/imgs/currentscrewdriver/currentcontrolledscrewdrivers2.jpg'), alt: 'slidercontent' },
    { id: 3, src: require('../../../resources/imgs/transducerscrewdriver/transducerizedscrewdrivers3.jpg'), alt: 'slidercontent' },
  ]
};

export default function Slideshow() {
  const [index, setIndex] = useState(0);
  const [source, setSource] = useState(sliderData.frontpage);
  const location = useLocation();

  // 监听路径变化切换数据源
  useEffect(() => {
    if (location.pathname === '/') {
      console.log('location has changed to: homepage');
      setSource(sliderData.frontpage);
      setIndex(0);
    } else {
      const pathKey = location.pathname.slice(1);
      console.log('location has changed to:' + pathKey);
      // 路径无对应数据时默认用首页数据
      const targetData = sliderData[pathKey] || sliderData.frontpage;
      setSource(targetData);
      setIndex(0);
    }
  }, [location]);

  // 自动轮播逻辑
  useEffect(() => {
    const timeout = setTimeout(() => {
      setIndex(prevIndex => 
        prevIndex === source.length - 1 ? 0 : prevIndex + 1
      );
    }, 10000);

    return () => clearTimeout(timeout);
  }, [source, index]);

  return (
    <div className="slideshow">
      <div
        className="slideshowSlider"
        style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}
      >
        {source.map(({ src, id, alt }) => (
          <img
            className="slide"
            src={src}
            key={id}
            alt={alt}
          />
        ))}
      </div>

      <div className="slideshowDots">
        {source.map((_, idx) => (
          <div
            key={idx}
            className={`slideshowDot${index === idx ? " active" : ""}`}
            onClick={() => setIndex(idx)}
          ></div>
        ))}
      </div>
    </div>
  );
}

额外优化建议 #

• 抽离配置文件：将sliderData单独放到sliderConfig.js中，便于统一管理图片数据。
• 绝对导入配置：修改项目配置实现图片路径的绝对导入，避免多层../../../的相对路径。
• 错误提示增强：当路径无对应数据源时，可添加控制台警告或默认占位图，提升开发调试效率。

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