所以我有一个项目，我必须做一个商店管理React应用程序，

• 产品名称
• 部分
• 货架（货架是一个区域中可放置产品的位置）

因此，这些机架被放置在一个Floorplan组件中，我在其中循环特定部分中的机架。如您在下一个屏幕截图中所见，这是正常工作的。x1c 0d1x
当我进一步Map“机架”结果时，我试图用产品填充每个机架，方法是使用正确的数据调用以获取必须放置在那里的产品。

<div className="floorplanWrapper">
    {racks.map(({id, productId, sectionId, col, row}) => {
        if (productId === null){
            return<div key={id} style={{position: "absolute" , top: col, left: row}}>
                    No product specified
                    </div>
        }
        else {
            return <RackItem key={id} productId={productId} sectionId={sectionId} row={row}  col={col}/>
        }
    })}

</div>

所以我把productId传递给RackItem，在Rackitem中，我通过指定的productId调用正确的产品。如下所示-〉（忽略使用产品的简单性，此时我只是试图访问数据，而不是布局页面。

export function RackItem({ sectionId, productId, col, row }: RackItemProps) {

    const {isLoading, isError, product} = useProductItem(productId);

    if (isLoading) {
        return (
            <CircularProgress sx={{display: "block", mt: "10em", mx: "auto"}}/>
        );
    }

    if (isError || !product) {
        return <Alert severity="error">Product could not be loaded</Alert>;
    }

    return (
        <>
            <div> {product.name}</div>
        </>
    )

}

函数useProductItem如下所示-〉

export function useProductItem(id: string) {
    const {
        isLoading,
        isError,
        data: product,
    } =  useQuery(["products"], () => getProduct(id));

    return {
        isLoading,
        isError,
        product,
    };
}

函数getProduct（id）如下-〉

export const getProduct = async (id: string) => {
    const product = await axios.get<Product>(`/products/${id}`);
    return product.data;
};

因此，每次创建组件“RackItem”时，我都希望得到不同的产品，但由于某种原因，它只给了我id为的产品：1.

有人能告诉我为什么axios请求每次都返回相同的对象吗？如果你需要更多的代码或图片，你可以问我。
我尝试删除异步和等待，但没有成功。