React JS实现搜索结果与用户输入关键词匹配的方案

核心问题分析 #

你当前调用的API http://localhost:1337/api/items?populate=image 未携带任何搜索过滤条件，Strapi默认返回分页后的固定数据集（你看到的4个是默认分页的第一页结果），因此无论输入什么关键词，都不会触发匹配逻辑。

解决步骤 #

1. 前端搜索跳转时携带关键词参数 #

确保搜索栏提交时，将用户输入的关键词编码后放到URL参数中，避免特殊字符导致请求异常：

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const SearchBar = () => {
  const [searchText, setSearchText] = useState('');
  const navigate = useNavigate();

  const handleSearch = (e) => {
    e.preventDefault();
    const trimmedText = searchText.trim();
    if (trimmedText) {
      navigate(`/search?query=${encodeURIComponent(trimmedText)}`);
    }
  };

  return (
    <form onSubmit={handleSearch}>
      <input
        type="text"
        value={searchText}
        onChange={(e) => setSearchText(e.target.value)}
        placeholder="输入关键词搜索..."
      />
      <button type="submit">搜索</button>
    </form>
  );
};

export default SearchBar;

2. 搜索结果页带过滤条件请求Strapi API #

在结果页组件中，获取URL中的关键词，拼接Strapi的过滤查询参数（以下示例匹配商品标题或描述中的关键词）：

import { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

const SearchResults = () => {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('query');
  const [items, setItems] = useState([]);

  useEffect(() => {
    if (!query) return;

    // 构造带多字段模糊匹配的API请求
    const apiUrl = `http://localhost:1337/api/items?populate=image&filters[$or][0][title][$contains]=${encodeURIComponent(query)}&filters[$or][1][description][$contains]=${encodeURIComponent(query)}`;

    fetch(apiUrl)
      .then(res => res.json())
      .then(data => setItems(data.data))
      .catch(err => console.error('搜索请求失败:', err));
  }, [query]);

  return (
    <div className="search-results">
      {items.length > 0 ? (
        items.map(item => (
          <div key={item.id} className="item-card">
            <h3>{item.attributes.title}</h3>
            {item.attributes.image && (
              <img src={`http://localhost:1337${item.attributes.image.data.attributes.url}`} alt={item.attributes.title} />
            )}
            <p>{item.attributes.description}</p>
          </div>
        ))
      ) : (
        <p>未找到匹配的商品</p>
      )}
    </div>
  );
};

export default SearchResults;

3. Strapi后端配置检查 #

• 进入Strapi后台，点击Settings -> Roles & Permissions，选择对应访问角色（如Public）
• 在Items权限中，确保勾选find操作，且允许使用过滤参数（Strapi v4默认开启，若手动修改过需确认）
• 确认需要过滤的字段（如title、description）在内容类型配置中已开启API访问权限

4. 测试验证 #

直接在浏览器地址栏访问构造好的API链接，例如：

http://localhost:1337/api/items?populate=image&filters[title][$contains]=测试

若返回匹配结果，说明后端配置正常，问题出在前端；若仍返回固定数据，检查Strapi的过滤规则或字段配置。

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