React - 卡片未呈现，因为我正在调用此 API 中的数据

Question

我收到了来自 API 的回复，但数据没有显示在卡上。 我认为这与数据没有太大关系，我认为这与首先出现的卡片本身有很大关系。 这是搜索文件的设置方式，非常简单。 如您所见，我确实设置了一个容器来存放卡片，因为我 map 通过它。

import '../styles/searchPage.css'
import SearchCard from '../components/SearchCard';

const API_URL =  'https://api.openbrewerydb.org/breweries?by_city';
const brewery1 = {
  "id": "10-barrel-brewing-co-san-diego",
  "name": "Nirmanz Food Boutique",
  "brewery_type": "large",
  "street": "1501 E St",
  "phone": "7739888990 ",
  "address": null,
  "city": "San Diego",
  "state": "California",
  "postal_code": "92101-6618",
  "country": "United States",
}

function SearchPage() {
  const [cards, setCards] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');
  const searchRestaurants = async (name) => {
    const req = await fetch(`${API_URL}&s=${name}`);
    const data = await req.json()
    console.log(data[0].name)
    setCards({data: data.name})
  }

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

  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'){
            setCards(searchTerm);
          }
        }}
        placeholder="Search..." 
        class="search-input"
        />
        <button 
        className='next'
        onClick={()=> searchRestaurants(searchTerm)}
        >Go</button>
        </div>
        {
            cards?.length > 0
             ? (
                <div className="container">
                {cards.map((card) =>(
                   <SearchCard brewery1={brewery1}/> 
                ))}
              </div>
             ) :
             (
                 <div className="empty">
                     <h2>Found 0 Breweries</h2>
                 </div>
             )
        }
    </div>
  );
}
export default SearchPage 

这是我的搜索卡的 JSX，标明了我想在该卡中显示的内容。

import '../styles/searchPage.css'

const SearchCard = ({brewery1}) => {
    return (
    <div className="card">
                {/* <img src={brewery1.Poster !== 'N/A' ? brewery1.Poster : 'https://via.placeholder.com/400'} alt={brewery1.name /> */}
            <div>
                <span>{brewery1.id}</span>
                <h3>{brewery1.brewery_type}</h3>
                <h2>{brewery1.street}</h2>
                <h2>{brewery1.adress}</h2>
                <h2>{brewery1.phone}</h2>
                <h2>{brewery1.city}</h2>
                <h2>{brewery1.state}</h2>
                <h2>{brewery1.postal_code}</h2>
                <h2>{brewery1.country}</h2>
            </div>
    </div>
    )
}
export default SearchCard;

Answer 1

在您的searchRestaurant方法中，像这样设置数据：

const searchRestaurants = async (name) => {
    const req = await fetch(`${API_URL}&s=${name}`);
    const data = await req.json()
    //make sure that data got your restaurants list
    setCards(data)
}

在这样的渲染中：

cards.map(card => <SearchCard brewery1={card}/>)

Answer 2

改变这个：

setCards(data);

和这个：

<SearchCard brewery1={card}/>