goBack 与 useHistory react-router-dom 触发旧结果 api

Question

我有两个页面（ListProduct 和 Basket）。

链接图片 (https://picshack.net/ib/XFZUHIhAaQ)

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

然后我去购物篮（包含我添加到购物车的所有产品）。在位置组件篮子上，我添加了更多一些产品示例，我将更多的项目 A 从 1 个数量添加到 3 个数量，仅供参考，它正在更新我的数据库中的数据，所以现在数据库中的项目 A 的数量是 3。

然后我 .goBack() 使用 useHistory (react-router-dom) 从视图 Basket 到 ListProduct。 在查看 ListProduct 时，它仍然是 1 个数量，而我的预期结果是 3。我不知道这是怎么发生的。

如果我刷新页面，它会将数据项 A 更新为 3。 如果我使用来自useHistory（react-router-dom）的.push（'path-of-listproduct'），它也会更新（篮子-> 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>
        </>
    )
}

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>
);
}

感谢您的帮助。

Answer 1

根据 react-router 文档中的建议，不应使用 history.location，因为它是可变的。您应该通过 Route 组件或使用 withRouter HOC 访问 pathname。

链接：https://reactrouter.com/web/api/history/history-is-mutable

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

Answer 2

只是分享我为解决此问题所做的工作

• ListProduct.jsx

<FormRow 
    product={promo}
 />

改成

<Kcard
  product={data}
  callBackAddItemTotal={callBackAddItemTotal}
  callBackDeleteItemTotal={callBackDeleteItemTotal}
/>`