26、题5：封装hooks · 大厂前端面试真题

>[danger]封装hooks：useSearch 完成以下封装hooks：useSearch ~~~ // https://xxx.com?status=1&keyword=test // request.get(url, {}) function useSearch() { //your code return { data } } ~~~ >[info]实现根据你提供的代码，可以封装一个自定义的`useSearch` Hook，用于处理搜索相关的逻辑。以下是一个示例实现： ```javascript import { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; function useSearch() { const location = useLocation(); const [data, setData] = useState(null); useEffect(() => { // 解析 URL 参数 const searchParams = new URLSearchParams(location.search); const status = searchParams.get('status'); const keyword = searchParams.get('keyword'); // 请求数据 request.get(url, {}) .then(response => { // 处理返回的数据 setData(response.data); }) .catch(error => { console.error('Error:', error); }); }, [location]); return { data }; } ``` 在上述代码中，我们使用了`react`和`react-router-dom`库。`useSearch` Hook 中使用了`useEffect`钩子来监听`location`的变化，一旦`location`发生变化（即 URL 参数改变），就会重新请求数据并更新`data`状态。请注意，上述代码中的 `url` 和 `request` 需要根据你的具体情况进行替换，这里只是个示例，你需要根据实际情况来设置请求的 URL 和使用的网络请求库。使用示例： ```javascript import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; function App() { const search = useSearch(); return ( <div> {/* 渲染页面内容 */} </div> ); } ReactDOM.render( <Router> <Route path="/" component={App} /> </Router>, document.getElementById('root') ); ``` 在上述示例中，我们在 `App` 组件中调用了 `useSearch` Hook，然后可以根据 `search.data` 的值来渲染页面内容。当 URL 参数发生变化时，`useSearch` Hook 会自动更新 `data` 状态，并触发重新渲染页面。