javascript - 当我点击浏览器时，UseEffect 不再运行

Question

我的产品页面有一排鞋品牌标志，如耐克、阿迪达斯等。下面是我们所有鞋子库存的图片。当用户点击一个品牌（例如耐克）时，网址会更改为 /nike 并过滤图像以仅显示耐克鞋。然后如果我点击阿迪达斯，网址将更改为 /adidas 并过滤以仅显示阿迪达斯鞋。但是，当我在浏览器上单击后退按钮时，URL 将变回 /nike，但图像仍然是 adidas。我有 useEffect 对brandId 的任何更改运行，这是用于过滤鞋子的道具。

这是我的代码：

import React, { useState, useEffect} from 'react'
import "../styles/ShoesPage.css"
import "../styles/Players.css"
import { Link } from 'react-router-dom'
import Axios from 'axios'


export default props => {
    const brandId = props.match.params.brand
    const [shoes, setShoes] = useState([])

    useEffect(() =>{

        Axios.get(`/shoes/brands/+${brandId}`).then(res=>
            setShoes(res.data)
        )

    }, [brandId])

    return (
        <>


        <div id="playercontainer">
            {shoes.map((shoe, i) => (
                <Link to={"/product/" + shoe.id} key={'shoe' + i}>
                    <div className="player">
                        <img className="shoeImg" src={`${shoe.pic}`} alt="" />
                        <div className="playerDesc">
                            <div className="teamName">{shoe.brand}</div>
                            <div className="playerName">{shoe.shoe}</div>   
                            <div className="shoePrice">${shoe.price}</div>
                        </div>
                    </div>
                </Link>
            ))}

        </div>
        </>
    )
}

标签： javascriptreactjsreact-reduxreact-router