从搜索栏跳转ProductDetail页面后，如何重置数量输入框值？

问题 #

我有两个组件：SearchBar.js 和 ProductDetail.js。SearchBar 用于页面头部搜索商品，点击搜索结果会跳转到 ProductDetail 页面。现在遇到的问题是：ProductDetail 页面里有一个接收数字值的输入框，修改数值后再搜索其他商品并跳转新的 ProductDetail 页面时，输入框的数值会保留之前的内容，不会重置，请问该怎么解决？

相关代码 #

ProductDetail.js

const [productCount, setproductCount] = useState(0);

<input 
  type="number" 
  className='input-quantity' 
  value={productCount || 1} 
  onChange={(e) => {
    setproductCount(parseInt(e.target.value))
  }}
/>

SearchBar.js

<div className="searchInput">
  <input
    id="searchKeyInputId"
    type="text"
    placeholder={placeholder}
    onChange={handleFilter}
    ref={inputRef}
  />
  <BiSearch className="input-append-icon" />

  {filteredData.length !== 0 && (
    <div className="searchResult">
      {filteredData && filteredData.slice(0, 5).map((value) => {
        return <Link
          to={`/p/${value.id}/${value.slug}`}
          className="searchItem"
          key={value.id}
          onClick={clearInput}
        >
          <p className='fontRegular'>{value.name}</p>
        </Link>
      })}
    </div>
  )}
</div>

解决方案 #

方法1：监听路由变化重置状态 #

React路由跳转时，若复用同一个ProductDetail组件渲染不同商品，组件不会重新挂载，只会更新props。可以监听路由参数变化，当商品ID或slug改变时重置productCount：

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

const ProductDetail = () => {
  const { id } = useParams(); // 获取路由中的商品ID
  const [productCount, setproductCount] = useState(0);

  // 商品ID变化时重置数量
  useEffect(() => {
    setproductCount(0); // 或直接设为1，根据需求调整默认值
  }, [id]); // 依赖项设为路由中的商品ID

  return (
    <input 
      type="number" 
      className='input-quantity' 
      value={productCount || 1} 
      onChange={(e) => {
        setproductCount(parseInt(e.target.value))
      }}
    />
  );
};

方法2：设置组件key强制重新挂载 #

在路由配置中给ProductDetail组件设置以商品ID为值的key，每次跳转不同商品时，React会识别为新组件实例，强制重新挂载，状态自动重置：

import { Routes, Route } from 'react-router-dom';
import ProductDetail from './ProductDetail';

// 路由配置示例
<Routes>
  <Route 
    path="/p/:id/:slug" 
    element={<ProductDetail key={window.location.pathname} />} 
  />
</Routes>

也可以在组件内部通过useParams获取ID作为key传递：

// 父组件或路由渲染逻辑
const { id } = useParams();
<ProductDetail key={id} />

方法3：调整初始值逻辑（可选） #

如果输入框默认值应为1而非0，可直接修改初始状态，再配合路由监听重置：

const [productCount, setproductCount] = useState(1);

useEffect(() => {
  setproductCount(1);
}, [id]);

内容的提问来源于stack exchange，提问作者Kim San