React项目：查询无匹配产品时如何渲染全部产品？

修改思路 #

当搜索请求返回空结果时，不再显示提示文字，而是发起全部产品的请求并渲染。

修改后的代码（ProductListAfterSearch.js） #

import { Box } from '@mui/material'
import React, { useState, useEffect } from 'react'
import { publicRequest } from '../requestMethod'
import CardProduct from './CardProduct/CardProduct'

const ProductListAfterSearch = ({query}) => {
  const [selectedProduct, setSelectedProduct] = useState([])

  useEffect(() => {
    const getProducts = async () => {
      if (query) {
        // 先执行搜索请求
        const searchRes = await publicRequest.get(`/products/search?searchQuery=${query}`);
        if (searchRes.data.length === 0) {
          // 搜索无结果，请求全部产品
          const allProductsRes = await publicRequest.get('http://localhost:5000/api/products/');
          setSelectedProduct(allProductsRes.data);
        } else {
          // 有搜索结果，使用搜索结果
          setSelectedProduct(searchRes.data);
        }
      } else {
        // 无搜索关键词，直接请求全部产品
        const allProductsRes = await publicRequest.get('http://localhost:5000/api/products/');
        setSelectedProduct(allProductsRes.data);
      }
    }
    getProducts()
  }, [query])

  return (
    <Box sx={{display: 'flex', flexWrap: 'wrap', gap: {xs: "0px", md: "10px"}, justifyContent: 'center'}}>
      {selectedProduct.map((product) => (
        <CardProduct query={query} key={product._id} product={product}/>
      ))}
    </Box>
  )
}

export default ProductListAfterSearch

修改说明 #

1. 调整请求逻辑：当存在搜索关键词query时，先调用搜索接口。如果返回的结果为空数组，立即调用全部产品接口并更新状态；如果有结果则直接使用搜索结果。
2. 移除无结果提示：因为搜索无结果时会自动切换为全部产品，所以不再需要显示Product do not exist......的提示文本，直接渲染产品列表容器即可。
3. 简化状态管理：无需新增额外状态存储全部产品，仅在搜索无结果时动态请求并更新现有状态。

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