自定义事件的 .on 方法未设置组件状态

如何解决自定义事件的 .on 方法未设置组件状态

我想显示用户想要使用 zomato api 搜索的餐厅或美食。当用户输入 search.jsx 时，我正在设置搜索状态。 Search.jsx 是：

import {useHistory} from 'react-router-dom';
import {eventBus} from '../../eventBus';

const Search = () => {
  const history = useHistory();
  const [search,setSearch] = useState('');
  function searchCuisine(e) {
    e.preventDefault();
    console.log("search query is ",search);
    eventBus.dispatch("searchData",{query:search});
    history.push('/searchResults');
  }
  return (
    <div className="searchbar">
      <input type="text" value={search} onChange={(e)=>setSearch(e.target.value)} placeholder="search cuisines,restaurants" />
      <button type="submit" onClick={(e)=>searchCuisine(e)}>Go</button>
    </div>
  );
};

export default Search;

我正在一个名为 Dashboard 的组件中获取数据，我在其中显示不同美食的卡片。 Dashboard.jsx 是：

import {eventBus} from '../../eventBus';
import CuisineCard from './CuisineCard';
import {API_KEY,BASE_URL} from "../../constants";

export default function Dashboard() {
    const [foods,setFoods] = useState([]);
    const [keyword,setKeyword] = useState('burger');
    const [found,setFound] = useState(true);
    useEffect(() => {
        let mounted = true;
        if(mounted) {
            eventBus.on("searchData",(info)=>{
                setKeyword(info.query);
            })
            
            console.log("working inside if")
            let finalUrl = BASE_URL+"?q="+keyword;
            fetch(finalUrl,{"headers":{"user-key":API_KEY}})
            .then((res)=>{
                if(res.ok){
                    return res.json();
                }
            })
            .then(data=>{
                if(data.results_found) {
                    console.log("keyword is ",keyword);
                    setFoods(data.restaurants);
                }
                else {
                    setFound(false);
                }
            })
        }
        return () => {
            mounted = false;
            eventBus.remove("searchData")
        }
    },[keyword])
    
    
    return (
        <div>
            
            {
                found && foods.map((item,i)=>(
                    <CuisineCard key={i} name={item.restaurant.name}/>
                ))
            }
            {
                !found && <h1>Not found</h1>
            }
        </div>
    )
}

现在当用户点击 Search.jsx 中的搜索按钮时，我使用 eventBus.js 触发一个自定义事件，代码是：

export const eventBus  = {
    on(event,callback) {
        console.log("on working",callback);
        document.addEventListener(event,(e) => callback(e.detail));
    },dispatch(event,data) {
        console.log("dispatch working",data);
        document.dispatchEvent(new CustomEvent(event,{ detail: data }));
    },remove(event,callback) {
        document.removeEventListener(event,callback);
    }
}

在 Dashboard 组件中，我在 useEffect 中使用 eventBus.on 方法，以便它设置关键字。但关键字没有改变。它是空的。我想不出办法做到这一点。