React中OpenBrewery API映射返回undefined的问题排查

你的代码存在两个核心问题，导致beer.name无法正常渲染：

1. map回调未返回JSX元素 #

你在brew.map内部编写了<p>{beer.name}</p>;，但没有返回该元素，React无法识别要渲染的内容。需要移除多余分号，或显式使用return（推荐用括号包裹JSX的隐式返回写法）。

2. 加载状态判断逻辑不合理 #

当前用brew.length > 1判断是否加载完成，若API仅返回1条数据，会一直显示Loading。应改为brew.length > 0，只要有数据就渲染列表。

修改后的完整代码 #

import axios from "axios";
import "../styles/List.css";
import { useState, useEffect } from "react";
import BrewCard from "../components/BrewCard";

// data-types: brewery_type, city, country, id, name, phone, latitude, longitude, postal_code, state, street, website_url

const List = () => {
  const [brew, setBrew] = useState([]);

  useEffect(() => {
    const getBrew = async () => {
      let newBrew = await axios.get(
        "https://api.openbrewerydb.org/breweries?by_city=atlanta"
      );

      setBrew(newBrew.data);
    };
    getBrew();
  }, []);

  console.log(brew);

  return brew.length > 0 ? (
    <div className={`main-bg-color list-container`}>
      {brew.map((beer) => (
        // 必须添加唯一key属性，避免React渲染警告
        <p key={beer.id}>{beer.name}</p>
      ))}
    </div>
  ) : (
    <div>Loading</div>
  );
};

export default List;

额外优化提示 #

• 若后续要使用BrewCard组件，直接传递beer对象即可：

{brew.map((beer) => (
  <BrewCard key={beer.id} brewery={beer} />
))}

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