React 16搜索栏功能实现求助：API数据获取及组件问题排查

核心问题排查与修复 #

1. 错误访问 navigate.location #

useNavigate 返回的是导航函数，没有location属性，必须用 useLocation 获取的 queryString 解析查询参数。

原错误代码：

const queryParams = new URLSearchParams(navigate.location.search).get("search")

修复后：

const queryParams = new URLSearchParams(queryString).get("search")

2. 查询参数格式错误 #

提交表单时生成的URL参数包含空格，导致 URLSearchParams 无法正确识别 search 键，必须去掉空格。

原错误代码：

navigate({
    search: `search = ${search}`
})

修复后：

navigate({
    search: `search=${search}`
})

3. Header中a标签错误使用to属性 #

普通HTML的<a>标签不支持to属性，要替换为react-router-dom的<Link>组件，否则点击品牌logo会刷新页面，破坏单页应用路由逻辑。

首先在Header组件导入Link：

import { Link } from "react-router-dom"

然后替换a标签：

<Link to="/">
    <span>AmaKart</span>
    {/* SVG内容保持不变 */}
</Link>

4. 移除冗余的重复SVG图标 #

SearchBox组件返回的Fragment里有两个完全相同的搜索SVG图标，属于无效代码，直接删除第二个即可。

5. 优化useEffect逻辑（可选） #

原useEffect逻辑可以简化，依赖queryString直接解析参数：

useEffect(() => {
    const params = new URLSearchParams(queryString);
    setSearch(params.get("search") || "");
}, [queryString]);

修复后的完整代码 #

SearchBox组件 #

import { Fragment, useState, useEffect } from "react"
import { useNavigate, useLocation } from "react-router-dom";

const SearchBox = () => {
    const navigate = useNavigate()
    const { search: queryString } = useLocation()
    const [search, setSearch] = useState("")

    useEffect(() => {
        const params = new URLSearchParams(queryString);
        setSearch(params.get("search") || "");
    }, [queryString])

    const handleInput = e => {
        setSearch(e.target.value)
    }

    const handleFormSubmission = e => {
        e.preventDefault();
        navigate({
            search: `search=${search}`
        })
    }

    return (
        <Fragment>
            <form onSubmit={handleFormSubmission}>
                <input 
                    name="search" 
                    type="text"
                    id="search" 
                    placeholder="Enter product name, category"
                    value={search}
                    onChange={handleInput}
                />
                <button type="submit">
                    <svg xmlns="http://www.w3.org/2000/svg" 
                        className="icon icon-tabler icon-tabler-search" 
                        width="20"
                        height="20" viewBox="0 0 24 24" 
                        strokeWidth="1.5" stroke="white" fill="none"
                        strokeLinecap="round" strokeLinejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <circle cx="10" cy="10" r="7" />
                        <line x1="21" y1="21" x2="15" y2="15" />
                    </svg>
                </button>
            </form>
        </Fragment>
    )
}

export default SearchBox

Header组件 #

import { Link } from "react-router-dom"
import Cart from "../Cart"
import SearchBox from "../UI/Search"

const Header = () => {
    return (
        <header>
            <div className="nav-brand">
                <Link to="/">
                    <span>AmaKart</span>
                    <svg xmlns="http://www.w3.org/2000/svg" 
                        className="icon icon-tabler icon-tabler-shopping-cart" 
                        width="30"
                        height="30" viewBox="0 0 24 24" 
                        strokeWidth="1.5" stroke="white" 
                        fill="none" strokeLinecap="round"
                        strokeLinejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <circle cx="6" cy="19" r="2" />
                        <circle cx="17" cy="19" r="2" />
                        <path d="M17 17h-11v-14h-2" />
                        <path d="M6 5l14 1l-1 7h-13" />
                    </svg>
                </Link>
            </div>
            <div className="searchBox-container">
                <SearchBox/>
            </div>
            <div className="cart-container">
                <Cart/>
            </div>
        </header >
    )
}

export default Header

后续API调用建议 #

修复上述bug后，可在useEffect中监听queryString变化，当存在搜索关键词时调用API获取数据：

useEffect(() => {
    const params = new URLSearchParams(queryString);
    const searchKeyword = params.get("search");
    setSearch(searchKeyword || "");
    
    // 调用API获取数据
    if (searchKeyword) {
        fetch(`your-api-url?search=${searchKeyword}`)
            .then(res => res.json())
            .then(data => {
                // 处理返回的数据
                console.log(data);
            })
            .catch(err => console.error(err));
    }
}, [queryString]);

内容的提问来源于stack exchange，提问作者Raima Soni