Reactjs 使用useHistory反应路由器dom触发旧结果api的goBack

我有两页（列表产品和篮子）

链接图像（）

ListProduct包含我可以添加到购物车的产品，例如我添加了一个数量为1的项目A

然后我去购物篮（包含我添加到购物车中的所有产品）。在position component Basket上，我添加了更多的产品示例，我添加了更多的项目A，从1个数量到3个数量，仅供参考，每个添加按钮都在更新数据库中的数据，因此现在数据库中项目A的数量为3

和I.goBack（）从视图篮到具有useHistory的ListProduct（react router dom）。 在查看列表产品时，它仍然是1个数量，我的预期结果是3个。我不知道这是怎么发生的

如果我刷新页面，它会将数据项A更新为3。 如果我使用useHistory（react router dom）中的.push（'path-of-listproduct'），它也会更新（basket->listproduct）。我无法使用它，因为.push（）保存或获取上一个url的路径很复杂

这是我的代码：

ListProduct.jsx

export default function ListFive(props) {
    const classes = useStyles();
    const [product, setProduct] = useState([]);
    const [totQtyItem, setTotQtyItem] = useState(null);

    useEffect(() => {
        const kategori = props.match.params.id;

        if (kategori === "promo") {
            let getPromoProducts = productAPI.newPromoProducts(5, 1);
    
            getPromoProducts.then((response) => {
                setProduct(response.data.data)
            }).catch(error => {
                console.log(error)
            });
        } else {
            let newProducts = productAPI.newProducts(10, 1);

            newProducts.then((response) => {
                setProduct(response.data.data)
            }).catch(error => {
                console.log(error)
            });
        }
    },[]);

    function FormRow(data) {
        return (
            <Kcard
                product={data}
                callBackAddItemTotal={callBackAddItemTotal}
                callBackDeleteItemTotal={callBackDeleteItemTotal}
            />
        );
    }

    const callBackAddItemTotal = (data) => {
        setTotQtyItem(data)
    }

    const callBackDeleteItemTotal = (data) => {
        setTotQtyItem(data)
    }

    return (
        <>              
            <div className={classes.root}>
                <Grid container spacing={1}>
                    <Grid container item xs={12} spacing={1}>
                        {
                            product.length >= 1 ?
                                product.map((promo, i) =>
                                    <FormRow 
                                        product={promo}
                                    />
                                )
                            :
                                <NotFoundPage 
                                    content="Produk Kosong"
                                />
                        }
                    </Grid>
                </Grid>
            </div>
        </>
    )
}

导出默认函数列表五（道具）{
const classes=useStyles（）；
const[product，setProduct]=useState（[]）；
常数[totQtyItem，setTotQtyItem]=useState（null）；
useffect（（）=>{
const kategori=props.match.params.id；
如果（kategori==“促销”）{
设getPromoProducts=productAPI.newPromoProducts（5,1）；
getPromoProducts.then（（响应）=>{
setProduct（response.data.data）
}).catch（错误=>{
console.log（错误）
});
}否则{
设newProducts=productAPI.newProducts（10,1）；
新产品。然后（（响应）=>{
setProduct（response.data.data）
}).catch（错误=>{
console.log（错误）
});
}
},[]);
函数FormRow（数据）{
返回(
);
}
const callBackAddItemTotal=（数据）=>{
setTotQtyItem（数据）
}
常量callBackDeleteItemTotal=（数据）=>{
setTotQtyItem（数据）
}
返回(
{
product.length>=1？
product.map（（promo，i）=>
)
:
}
)
}

Kcard.jsx

export default function Kcard(props) {
    const classes = useStyles();
    const [carts, setCarts] = useState([]);
    const [qtyItem, setQtyItem] = useState(null);
    let data = { title: "Waiting for Data" };
    const [todo, setTodo] = useState(data);
    const [isData, setData] = useState(false);
    const [isFetching, setFetching] = useState(false);

useEffect(() => {        
    // called after the first render
    async function fetchData() {
        let app_id = localStorage.getItem('sessionId');

        if (app_id === null) {
            localStorage.setItem('sessionId', lib.makeSessionId(40))
        } else {

            let getItemAct = cartAPI.getItems(app_id);
            getItemAct.then((response) => {
                console.log(response);
                const adf = response.data.find(o => o.product_id === props.product.product._id);
                props.callBackAddItemTotal(response.data.length);
                if (adf !== undefined){
                    setQtyItem(adf.qty);
                }
            }).catch(error => {
                console.log(error)
            });
        }
    }
    fetchData();
},[]);

return (
    <React.Fragment>
        <Grid item xs={6}>
            <Paper className={classes.paper}>
                <GridList spacing={1} className={classes.gridList}>
                    <GridListTile key="fsd" cols={2} rows={2}>
                        {/* {console.log(qtyItem)} */}
                        <Link to={"/detail-product/" + props.product.product._id}>
                            <img
                                src="path-image"
                                className={
                                    props.product.product.stok <= 0 ?
                                        classes.imgFullHeightSoldOut
                                    :
                                        classes.imgFullHeight
                                }
                            />
                            {
                                props.product.product.stok <= 0 ?
                                    <div className={classes.soldOut}>Sold Out</div>
                                : 
                                    ""
                            }
                        </Link>

                        <div> **-** </div>

                        <div> **3** <div> 
                        
                        <div> **+** </div>
                    </GridListTile>
                </GridList>
            </Paper>
        </Grid>
    </React.Fragment>
);
}

导出默认功能Kcard（道具）{
const classes=useStyles（）；
const[carts，setCarts]=useState（[]）；
const[qtyItem，setQtyItem]=useState（null）；
let data={title:“等待数据”}；
const[todo，setTodo]=useState（数据）；
const[isData，setData]=useState（false）；
const[isFetching，setFetching]=useState（false）；
useffect（（）=>{
//在第一次渲染后调用
异步函数fetchData（）{
让app_id=localStorage.getItem（'sessionId'）；
如果（应用程序id==null）{
localStorage.setItem（'sessionId'，lib.makeSessionId（40））
}否则{
让getItemAct=cartAPI.getItems（应用程序id）；
getItemAct.then（（响应）=>{
控制台日志（响应）；
const adf=response.data.find（o=>o.product\u id==props.product.product.id）；
props.callBackAddItemTotal（response.data.length）；
如果（adf！==未定义）{
设置数量项目（adf.数量）；
}
}).catch（错误=>{
console.log（错误）
});
}
}
fetchData（）；
},[]);
返回(
{/*{console.log（qtyItem）}*/}
{
props.product.product.stok根据react router文档中的建议，不应使用history.location，因为它是可变的。您应该通过路由组件或使用withRouter HOC访问路径名

链接：

将购物车的状态直接保存到数据库可能会出现竞争情况，客户机/数据库无法更新并返回条目的新值。最好使用本地存储中的Redux或作为cookies来处理购物车状态，这是大多数商店处理购物车历史的方式。如果您希望要使购物车数据持久化，请在后台更新数据库