Javascript 如何在使用ReactJS下新订单时播放声音

我正在用ReactJS构建这个PWA

正如标题所说，我只想在下新订单时播放声音

我使用上下文API来管理状态

这是我的OrderContext.js，在这里我使用React查询从API获取订单

import React, { createContext } from "react";
import { useQuery } from "react-query";
import apiClient from "../EventService";

export const OrderContext = createContext();

export const OrderProvider = (props) => {
  const fetchOrders = async () => {
    const { data } = await apiClient.getEvents();
    return data;
  };

  let { data: orders, status } = useQuery("orders", fetchOrders, {
    refetchInterval: 15000,
    refetchIntervalInBackground: true,
    notifyOnStatusChange: false,
  });

  return (
    <OrderContext.Provider value={[orders, status]}>
      {props.children}
    </OrderContext.Provider>
  );
};

import React，{createContext}来自“React”；
从“react query”导入{useQuery}；
从“./EventService”导入apiClient；
export const OrderContext=createContext（）；
导出常量医嘱提供者=（道具）=>{
const fetchOrders=async（）=>{
const{data}=await apiClient.getEvents（）；
返回数据；
};
让{data:orders，status}=useQuery（“orders”，fetchOrders{
重新蚀刻间隔：15000，
参考IntervalinBackground：正确，
notifyOnStatusChange:false，
});
返回(
{props.children}
);
};

然后在我的OrdersList.js组件中的某个地方，我只使用状态并通过它进行映射：

{orders.map((order) => (
     <Order key={order.id} order={order} />
))}

{orders.map（（order）=>(
))}

最后，在我的Order.js组件中，我检查是否有新订单：

我正在使用此功能检查订单是否在15分钟或更短时间前下单

const isNewOrder = (orderCreatedDate) => {
    if (moment().diff(moment(orderCreatedDate)) / 900000 <= 1) {
      return true;
    } else {
      return false;
    }
  };

const isNewOrder=（orderCreatedDate）=>{
如果（矩（）.diff（矩（orderCreatedDate））/900000我认为你最好的方法是在你的
订单
组件中添加一个道具，然后检查你是否在订单列表页面或订单页面上。如果是在一个订单上，那么你可以调用
声音.播放
，否则你就不会

另外，如果你还没准备好的话，你应该使用。普通的吼叫者不能很好地使用React（没有双关语）

最后，您应该添加一个
componentWillUnmount
函数来停止声音播放（只需在
componentWillUnmount
内部调用
sound.stop（）
）.
当你说你有问题时，到底发生了什么？有错误吗？实际结果是什么？声音播放得很糟糕，到处都会触发，就像你点击网站上的任何地方，它们就会播放。我们需要查看你播放声音时使用的代码。缺少很多p现在是ieces。我知道要粘贴的代码可能很多，你也可以提供github或其他代码库。这是完整的component Order.js，我使用的是howler：这是我正在谈论的bug噪音，正如你在组件中看到的，我只使用sound.play（）我在函数中返回true，但它创建了这种奇怪的行为哦，我明白了，唯一的问题是我使用的是React钩子，我的组件不是类组件。组件willunmount的等价物是什么？您可以使用
useffect
函数，并将代码放置在返回语句。有关详细信息，请参阅。我尝试使用React-Howler，但它似乎不起作用，它不会播放任何声音
  {isNewOrder(order.date_created) && (
        <Badge style={{ padding: 3 }} content="Nuevo" />
   )}