Я делаю довольно простой вызов API для (https://api.punkapi.com/v2/beers ) и отображение извлеченных данных в компоненте, но каким-то образом данные не отображаются на странице, но когда я регистрирую их в консоли, данные отображаются правильно.

 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>
  );
};
 

Проблема

Вы ничего не возвращаете из своего item сопоставления. Верните JSX, который вы хотите отобразить (т.Е. return <p>{name}</p> ), и не забудьте добавить ключ реакции к отображаемым элементам. Ниже я упростил до неявного возврата.

Вы также должны удалить журнал консоли из возврата рендеринга, поскольку методы «рендеринга» должны быть чистыми функциями без побочных эффектов, таких как ведение журнала консоли. Либо запишите результат выборки в цепочке обещаний, либо используйте useEffect перехват для регистрации обновленного состояния.

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

...

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

Вам нужно вернуть значение из внутреннего .map метода, например:

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

Вам нужно вернуть элементы 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>
  );
};