Javascript API数据未出现在组件中，但显示在控制台中

我对（）进行了一个相当简单的API调用，并在组件中显示获取的数据，但不知何故，数据没有显示在页面上，但当我将其记录在控制台日志中时，数据显示正确

const Comp= () => {
  const [item, setItem] = React.useState([]);

  React.useEffect(() => {
    fetch('https://api.punkapi.com/v2/beers')
      .then((res) => res.json())
      .then((data) => {
        setItem(data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <div>
      {item.map((beer) => {
        const { name, tagline } = beer;
       
          <p>{name}</p>;
 
        console.log(name);
      })}
    </div>
  );
};

const Comp=（）=>{
const[item，setItem]=React.useState（[]）；
React.useffect（（）=>{
取（'https://api.punkapi.com/v2/beers')
.然后（（res）=>res.json（））
。然后（（数据）=>{
设置项（数据）；
})
.catch（（错误）=>{
控制台日志（err）；
});
}, []);
返回(
{item.map（（啤酒）=>{
const{name，tagline}=啤酒；
{name}
；
console.log（名称）；
})}
);
};

您需要从

内部返回值。map

方法如下：

return (<p>{name}</p>)

返回（{name}
）

问题 您不会从

项

映射中返回任何内容。返回要呈现的JSX（即

返回{name}

），不要忘记向映射的元素添加React键。下面我已经简化为隐式返回

您还应该从呈现返回中删除控制台日志，因为“呈现”方法是纯函数，没有副作用，例如控制台日志记录。在承诺链中记录获取结果，或者使用

useffect

钩子记录更新状态

useEffect(() => console.log(item), [item]);

...

return (
  <div>
    {item.map(({ id, name }) => (
      <p key={id}>{name}</p>
    ))}
  </div>
);

useffect（（）=>console.log（项），[item]）；
...
返回(
{item.map（{id，name}）=>(
{name}
))}
);

---

您需要返回映射中的JSX元素

   const Comp= () => {
  const [item, setItem] = React.useState([]);

  React.useEffect(() => {
    fetch('https://api.punkapi.com/v2/beers')
      .then((res) => res.json())
      .then((data) => {
        setItem(data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <div>
      {item.map((beer) => {
        const { name, tagline } = beer;
       
         return <p>{name}</p>;
 
        console.log(name);
      })}
    </div>
  );
};

const Comp=（）=>{
const[item，setItem]=React.useState（[]）；
React.useffect（（）=>{
取（'https://api.punkapi.com/v2/beers')
.然后（（res）=>res.json（））
。然后（（数据）=>{
设置项（数据）；
})
.catch（（错误）=>{
控制台日志（err）；
});
}, []);
返回(
{item.map（（啤酒）=>{
const{name，tagline}=啤酒；
返回{name}
；
console.log（名称）；
})}
);
};