Primereact Galleria切换至最后一张图后出现未定义变量报错

问题原因 #

1. 组件初始化时images的初始值为null，Galleria组件处理非数组类型的value时，循环逻辑会出现异常，导致切换到最后一张后尝试读取undefined的itemImageSrc属性。
2. itemTemplate未对传入的item做空值判断，当组件内部异常传递undefined时，直接访问属性会触发报错。

修复方案 #

1. 初始化state为空数组 #

将useState(null)改为useState([])，确保Galleria从渲染开始就拿到合法的数组类型值，避免初始化阶段的逻辑异常。

2. 给itemTemplate添加空值防御 #

在访问item.itemImageSrc前先判断item是否存在，避免直接访问undefined的属性。

修复后的完整代码 #

const carousel = () => {
  // 初始化空数组而非null
  const [images, setImages] = useState([]);
  useEffect(() => {
    setImages([
        {
            "itemImageSrc": '/src/assets/img/shett.png', 
        },
        {
            "itemImageSrc": '/src/assets/img/shett2.png', 
        },
        {
            "itemImageSrc": '/src/assets/img/shett3.png', 
        }
    ])
  }, [])

  const itemTemplate = (item) => {
    // 添加空值判断
    if (!item) return null;
    return (
        <div className="p-galleria">
            <img 
                src={item.itemImageSrc} 
                onError={(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'}  
                style={{ width: '100%' }} 
            />
        </div>
    )}

  return (
        <>  
            <div className="card">
                <Galleria autoPlay showThumbnails={false} value={images} item={itemTemplate} ></Galleria>
            </div>  
        </>
  )
}

额外说明 #

修复后images数组初始化后有内容，Galleria会自动从第一个元素开始展示，autoPlay也能正常循环。

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