React Router v6中useNavigate导航异常问题求助

核心问题分析 #

• 你在handleKeyDown中使用map遍历bookData，每一次循环都会执行navigate指令。即使存在匹配项，只要数组里有不匹配的项，最后一次循环的navigate("/searchNull")会覆盖之前的导航操作，导致最终总是跳转到/searchNull。
• 同时混用inputRef和useState获取输入值，属于冗余写法，还可能引发值不一致的潜在问题。
• Context中searchValue初始值设为空格，可能干扰后续匹配判断逻辑。

解决方案 #

1. 用Array.some()替代map：该方法会检查数组中是否存在符合条件的元素，只需一次判断即可确定是否匹配，避免多次执行导航指令。
2. 移除冗余的inputRef：直接使用inputChange状态值传递搜索内容，简化逻辑。
3. 修正searchValue初始值：改为空字符串，避免空格干扰匹配。

修改后的SearchInput.js #

import "./SearchInput.css";
import Search from "../../../assets/Images/icon/search-normal.svg";
import { useNavigate } from "react-router-dom";
import { React, useState } from "react";
import { useAppContext } from "../../../Context/SearchContext/SearchContext";

const SearchInput = (props) => {
  const [inputChange, setInputChange] = useState("");
  const navigate = useNavigate();
  const { setSearchValue, bookData } = useAppContext();

  const inputChangeHandler = (event) => {
    setInputChange(event.target.value);
  };

  // 统一搜索逻辑函数
  const handleSearch = () => {
    setSearchValue(inputChange);
    const isMatch = bookData.some(
      (item) => item.name.toString() === inputChange.toString()
    );
    navigate(isMatch ? "/search" : "/searchNull");
  };

  const handleKeyDown = (event) => {
    if (event.key === "Enter") {
      handleSearch();
    }
  };

  return (
    <div className="search-input-container">
      <input
        className="search-input"
        onChange={inputChangeHandler}
        value={inputChange}
        type="text"
        onKeyDown={handleKeyDown}
        placeholder={props.placeholder}
      />
      <button className="search-icon" onClick={handleSearch}>
        <img src={Search} width="100%" height="100%" alt="search icon" />
      </button>
    </div>
  );
};

export default SearchInput;

修改后的Context.js #

import React, { createContext, useContext, useEffect, useState } from "react";
import axios from "axios";

const CoinsContext = createContext({});

const SearchContext = ({ children }) => {
  // 修正初始值为空白字符串
  const [searchValue, setSearchValue] = useState("");
  const [bookData, setBookData] = useState([]);

  useEffect(() => {
    axios.post('/books/list/all').then((response) => {
      // 简化数组转换逻辑
      const bookApi = response.data.data.map(item => ({
        id: item.id,
        name: item.name,
      }));
      setBookData(bookApi);
    });
  }, []);

  return (
    <CoinsContext.Provider value={{ searchValue, setSearchValue, bookData, setBookData }}>
      {children}
    </CoinsContext.Provider>
  );
};

export const useAppContext = () => useContext(CoinsContext);
export default SearchContext;

内容的提问来源于stack exchange，提问作者fateme barzegar