React问题：onClick无法搜索API城市，默认纽约搜索失效

核心问题：API请求URL格式错误 #

你的代码存在两个关键的URL参数错误，导致请求无法正确获取目标城市的啤酒厂数据：

• API_BASE_URL参数结构错误：原URL里的by_city&per_page是无效格式，&是HTML转义字符，需直接用&，且by_city要赋值目标城市、per_page需指定每页数量。
• 搜索参数名错误：OpenBreweryDB按城市搜索的参数是by_city，而非你代码里的s。

修正后的代码 #

1. 修正API请求逻辑 #

import React, {useState, useEffect} from 'react';
import '../styles/searchPage.css'
import SearchCard from '../components/SearchCard';

// 仅保留基础API地址，参数在请求时动态拼接
const API_BASE_URL = 'https://api.openbrewerydb.org/breweries';

function SearchPage() {
  const [cards, setCards] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  
  const searchRestaurants = async (city) => {
    // 对城市名做URL编码，处理空格等特殊字符
    const encodedCity = encodeURIComponent(city);
    // 拼接正确参数：by_city指定城市，per_page设置每页数量（可自行调整）
    const req = await fetch(`${API_BASE_URL}?by_city=${encodedCity}&per_page=20`);
    const data = await req.json();
    console.log(data);
    setCards(data);
  };

  useEffect(() => {
    searchRestaurants('new york');
  }, []);

2. 搜索交互部分（修正class为className） #

return (  
    <div className='search'>
      <h1>Enter a City or Town name</h1>
      <div className='search-container'>
       <input 
        type="text"
        name="search"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        onKeyPress={(e) => {
          if (e.key === 'Enter'){
            searchRestaurants(searchTerm);
          }
        }}
        placeholder="Search..." 
        className="search-input"
        />
        <button 
        className='next'
        onClick={()=> searchRestaurants(searchTerm)}
        >Go</button>
        </div>
      {/* 渲染啤酒厂卡片的逻辑 */}
      <div className="cards-list">
        {cards.map(brewery => (
          <SearchCard key={brewery.id} data={brewery} />
        ))}
      </div>
    </div>
  );
}

export default SearchPage;

额外注意事项 #

• React元素的类名需用className替代原生HTML的class，避免控制台警告。
• 确保SearchCard组件能正确接收并渲染啤酒厂数据，比如使用brewery.name、brewery.city等字段。

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