Question

我正在使用react和react-router制作前端购物车。我使用的是HashRouter而不是BrowserRouter。

我要路由到/product/:id，并通过从所有产品中过滤props.match.params.id产品来使用:id呈现产品组件。

在手动刷新页面之前，它可以正常工作。手动刷新时，其他所有页面都可以重新加载。产品页面因错误而崩溃。

这是产品路线：

<Route path ="/product/:id" component = {ProductPage} />

这是ProductPage组件

const [currentImage, setImage] = useState(products.filter(item => item.id === searchId)[0].images[0]);
const [original, setOriginal] = useState(product.price[0].original);
const [offer, setOffer] = useState(product.price[0].offer);
const [size, setSize] = useState(product.price[0].size);


useEffect(()=>{
    setImage(products.filter(item => item.id === searchId)[0].images[0]);
    document.documentElement.scrollTo(0,0);

},[props.match.params.id])

当我手动刷新ProductPage时，出现错误 TypeError：无法读取未定义的属性“图像”

如何解决此问题？

ps：产品是对象数组

刷新时反应路由器

0 个答案: