В чем заключается ошибка в коде или почему fetch не работает?

Question

Christian

react

В чем заключается ошибка в коде или почему fetch не работает?

Почему элементы из json-файла не возвращаются в коде при вызове fetch() с данной ссылкой (https://6551d7a35c69a7790329267e.mockapi.io/data_c...)? 

код: 

import { useState, useEffect } from "react";
import { Collection } from "./Collection";

function App() {
  const [collections, setCollections] = useState([]);

  useEffect(() => {
    fetch("https://6551d7a35c69a7790329267e.mockapi.io/data_collection")
      .then((res) => res.json())
      .then((json) => {
        setCollections(json);
      })
      .catch((err) => {
        console.warn(err);
        alert("Произошла ошибка");
      });
  }, []);
  
  return(
        {collections.map((obj) => {
          <Collection name={obj.name} images={obj.photos} />;
        })}
)

export default App;

13 ноября 2023 г. 12:59

Ответы на вопрос 2

Похожие вопросы

Answer 1

Одна из возможных ошибок в коде заключается в том, что внутри функции map не происходит явного возврата JSX элемента. Вместо этого нужно использовать ключевое слово return перед JSX элементом Collection:

return (
  {collections.map((obj) => {
    return <Collection name={obj.name} images={obj.photos} />;
  })}
)

Если эту ошибку исправить и код все равно не работает, возможно, что ссылка на API недоступна или возвращаемый JSON-файл содержит ошибки. Необходимо проверить работоспособность ссылки и формат JSON-файла.

Answer 2

return (
    <>
        {collections.map((obj) => (
            
        ))}
    
);