如何让轮播组件响应URL路径变化？

你的核心问题是手动修改URL路径时，图库无法根据新的signatura参数更新显示的图片，根源在于异步数据加载的时机处理不当，以及useEffect的依赖项配置不完整。

问题拆解 #

1. 异步加载未等待：原代码中调用dispatch(getPhotos())后立刻执行photos.findIndex，但getPhotos是异步操作，此时photos数组还未被新数据更新，导致无法找到正确的图片索引。
2. 依赖项缺失：即使后来添加了signatura到useEffect依赖，仍未考虑photos加载完成后的状态变化，URL变化时可能photos还未就绪，索引计算依然错误。
3. 错误的状态更新调用：尝试dispatch(setSelectedPhoto(photo.signatura))时，传入的是字符串类型的signatura，但setSelectedPhoto的payload应该是照片对象，导致状态更新无效。

修正代码 #

组件代码调整

const { signatura } = useParams();
const dispatch = useDispatch();

// 使用Slice中已定义的selector获取选中图片
const selectedPhoto = useSelector(selectSelectedPhoto);
const photos = useSelector(selectPhotos);

// 仅在组件挂载时加载一次照片数据
useEffect(() => {
  dispatch(getPhotos());
}, [dispatch]);

// 当signatura或photos变化时，重新计算并更新选中图片索引
useEffect(() => {
  // 避免在数据未加载或参数为空时执行无效操作
  if (!photos.length || !signatura) return;

  const photoIndex = photos.findIndex(photo => photo.signatura === signatura);
  dispatch(setSelectedPhotoIndex(photoIndex));
}, [dispatch, signatura, photos]);

if (!selectedPhoto) {
  return <div>Photo not found</div>;
}

// 此处渲染你的图片内容

关键修改说明

• 拆分useEffect：将数据加载和索引更新分离，确保数据加载完成后再进行索引计算。
• 完善依赖项：添加photos和signatura到依赖数组，保证URL变化或数据更新时都会触发索引重新计算。
• 边界判断：增加!photos.length || !signatura的判断，避免在数据未就绪时执行无效逻辑。
• 复用已有Selector：直接使用Slice中定义的selectSelectedPhoto，无需手动计算selectedPhoto，避免重复逻辑和索引越界问题。

额外注意点 #

• 确保getPhotos异步操作完成后，photos数组会正确更新到Redux状态中。
• 如果photos数据会频繁变化，可以考虑在getPhotos的thunk中直接根据当前signatura设置选中索引，进一步简化组件逻辑。

内容的提问来源于stack exchange，提问作者Andrija Vranić