刷新页面时，我的 .filter 反应丢失答案

【问题标题】：My .filter in react lost when refresh page刷新页面时，我的 .filter 反应丢失
【发布时间】：2026-01-14 14:35:01
【问题描述】：

当用户想要搜索产品时，我正在尝试创建搜索栏。

这是我的搜索输入：

const [searchTerm, setSearchTerm] = useState("");

const onSubmit = (e) => {
  e.preventDefault();
  navigate(`/search/${searchTerm}`);
  setIsShowing(false);
  setOpacity(1);
};

<FormSearch onSubmit={onSubmit}>
  <SearchInput type="text" 
               placeholder="Type something to search" 
               onChange={(e)=> setSearchTerm(e.target.value)} 
               defaultValue={searchTerm} />
  <SearchButton type="submit" value="Search" />
</FormSearch>

这是点击搜索并将用户带到另一个页面时的路由器：

<Router>
  <SearchInfo
    path="/search/:title "
    searchTerm={searchTerm}
  />
</Router>

这是我搜索后页面的反应功能：

import React, { useEffect, useState } from "react";
import styled from "styled-components";
const SearchInfo = (props) => {
  const [products, setProducts] = useState([]);
  const getProductsAPI = () => {
    axios
      .get("http://localhost:8000/api/products")
      .then((res) => {
        setProducts(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    getProductsAPI();
  }, [props]);
  const InfoWrapper = styled.div`
    text-align: center;
  `;

  return (
    <div>
      <InfoWrapper>
                  {products
        .filter((product) =>
          product.title.includes(props.searchTerm.toUpperCase())
        )
        .map((filteredItem, i) => (
          <Item key={i}>
              <ItemTitle> {filteredItem.title} </ItemTitle>
          </Item>
        ))}
      </InfoWrapper>
    </div>
  );
};

export default SearchInfo;

如果我刷新页面，它将显示我的所有产品，而不仅仅是props.searchTerm。我怎样才能解决这个问题？好像我从路由传递的道具没有会话

【问题讨论】：

您的网址在浏览器中的显示效果如何？

标签： javascript reactjs

【解决方案1】：

searchTerm 来自你传递的 state 和 props，而不是来自 url。您需要从路由器获取参数并使用它，请参阅https://reactrouter.com/web/api/Hooks/useparams

类似：

<Router>
  <SearchInfo path="/search/:searchterm"/>
</Router>

import { useParams } from "react-router-dom";

const SearchInfo = (props) => {
  let { searchterm } = useParams();

  // ...

  return (
    <div>
      <InfoWrapper>
        {products.filter((product) => product.title.includes(searchterm))
        .map((filteredItem, i) => (
          <Item key={i}>
              <ItemTitle> {filteredItem.title} </ItemTitle>
          </Item>
        ))}
      </InfoWrapper>
    </div>
  );
};

【讨论】：

【解决方案2】：

我不知道为什么你的SearchInfo 有path 作为道具，但我认为path 应该由路由器管理，所以理想的结构是：

<Router path="/search/:searchterm" component={SearchInfo} />

然后您可以轻松访问位置信息：

const SearchInfo = (props) => {
  // Here is what you need
  const {
    match: { params },
  } = props;
}

【讨论】：