React卡片未渲染问题：API数据获取成功但无法显示

核心错误及修复方案 #

• 状态更新逻辑错误
  • 原代码中searchRestaurants里用setCards({data: data.name})，API返回的是酿酒厂对象数组，应直接将整个数组存入状态：setCards(data)；另外回车事件里错误把searchTerm（字符串）存入cards状态，需改成调用searchRestaurants(searchTerm)触发正确请求。
• 渲染时未使用遍历的API数据
  • 原cards.map循环始终传入硬编码的brewery1，需把当前遍历项card传给SearchCard组件：<SearchCard brewery={card}/>（同时修改props名称更贴合语义）。
• API请求URL格式错误
  • 原API_URL末尾缺少=，正确URL应为'https://api.openbrewerydb.org/breweries?by_city='，否则参数传递无效。
• SearchCard组件拼写错误
  • 原代码里brewery1.adress是拼写错误，应为brewery1.address，否则无法读取对应字段。
• 缺失React Hooks导入
  • SearchPage组件使用了useState和useEffect但未导入，需添加import { useState, useEffect } from 'react';。

修正后的SearchPage组件代码 #

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

const API_URL = 'https://api.openbrewerydb.org/breweries?by_city=';

function SearchPage() {
  const [cards, setCards] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  const searchRestaurants = async (cityName) => {
    try {
      const req = await fetch(`${API_URL}${cityName}`);
      const data = await req.json();
      setCards(data);
    } catch (error) {
      console.error('请求失败:', error);
      setCards([]);
    }
  };

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

  return (  
    <div className='search'>
      <h1>输入城市或城镇名称</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="搜索..." 
          className="search-input"
        />
        <button 
          className='next'
          onClick={() => searchRestaurants(searchTerm)}
        >搜索</button>
      </div>
      {
        cards.length > 0 ? (
          <div className="container">
            {cards.map((brewery) => (
              <SearchCard key={brewery.id} brewery={brewery} /> 
            ))}
          </div>
        ) : (
          <div className="empty">
            <h2>未找到任何酿酒厂</h2>
          </div>
        )
      }
    </div>
  );
}

export default SearchPage;

修正后的SearchCard组件代码 #

import '../styles/searchPage.css';

const SearchCard = ({ brewery }) => {
  return (
    <div className="card">
      <div>
        <span>{brewery.id}</span>
        <h3>{brewery.brewery_type}</h3>
        <h2>{brewery.street || '无街道信息'}</h2>
        <h2>{brewery.address || '无地址信息'}</h2>
        <h2>{brewery.phone || '无联系电话'}</h2>
        <h2>{brewery.city}</h2>
        <h2>{brewery.state}</h2>
        <h2>{brewery.postal_code}</h2>
        <h2>{brewery.country}</h2>
      </div>
    </div>
  );
};

export default SearchCard;

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