Reactjs useState 不替换以前的状态

Question

我有一个组件，可以在组件加载时加载所有产品。该组件还具有搜索功能，可以获取用户输入并根据用户输入查询数据库以查找产品。搜索结果应替换该组件最初加载的任何产品。下面是加载和搜索功能。

我看到的问题是搜索功能不会替换已加载的产品，而是将搜索返回的任何产品附加到已加载的产品列表中。

  const [products, setProducts] = useState([]);
  const [page, setPage] = useState(1);
  const [limit] = useState(100);
  const [searchQuery, setSearchQuery] = useState('');

  useEffect(() => {
    const loadProducts = async () => {
      console.log('Fetching products for page:', page);
      try {
        const data = await fetchProducts(page, limit);
        console.log('Fetched products:', data);
        setProducts(prevProducts => [...prevProducts, ...data.products]);
      } catch (err) {
        console.error('Error fetching products:', err);
      }
    };
    loadProducts();
  }, [page, limit]);

  const handleSearch = async () => {
    console.log('Searching for products with query:', searchQuery);
    try {
      const data = await searchProducts(searchQuery);
      setProducts(data.products);  
      setPage(1);
    } catch (err) {
      console.error('Error searching for products:', err);
    }
  };

Answer 1

setPage(1)

导致

page

状态发生变化。由于发生了更改并重新渲染，因此第一个 useEffect 会运行。在第一个 useEffect 产品中附加 -

setProducts(prevProducts => [...prevProducts, ...data.products]);

。

我们可能想检查页码是否为

1

那么我们不需要追加。