Question

0

146

Views

Fetch and function error on AJAX and APIs call on reactjs

I'm getting an error of items.map is not a function when fetching the file that is hosted from unsplash.

I'm not sure if the problem is from the .map or from fetching the file from source.

Below is my code and also here is the complete sandbox code https://codesandbox.io/.

import { React, useState, useEffect } from "react";

function MyComponent() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);
  useEffect(() => {
    fetch(
      "https://api.unsplash.com/search/photos?query=nature?orientation=landscape&client_id=ddIh7_ebg4KwNHzNLf3ePCZb6yIPREJ5jxG3dYgoj6U"
    )
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, []);

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <ul>
        {items.map((item) =>
          <li key={item.results.id}>
            {item.results.description}
          </li>
        )}
      </ul>
    );
  }
}

export default MyComponent;

over 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-05-09T15:30:22.597Z

It seems the response JSON is an object and not an array. When you update the items state with an object it's no longer mappable.

// 20220209004834
// https://api.unsplash.com/search/photos?query=nature?orientation=landscape&client_id=ddIh7_ebg4KwNHzNLf3ePCZb6yIPREJ5jxG3dYgoj6U#f3f3f3

{
  "total": 10000,
  "total_pages": 1000,
  "results": [
    {
      "id": "_LuLiJc1cdo",
      "created_at": "2016-06-06T01:08:36-04:00",
      "updated_at": "2022-02-08T13:00:46-05:00",
      "promoted_at": "2016-06-06T01:08:36-04:00",
      ...
      "description": "follow @kalenemsley on ig",
      ...
    },
    ...
  ],
  ...
}

You probably want the results array property for your state.

useEffect(() => {
  fetch("....")
    .then((res) => res.json())
    .then(
      (result) => {
        setIsLoaded(true);
        setItems(result.results);
      },
      (error) => {
        setIsLoaded(true);
        setError(error);
      }
    );
}, []);

Then when mapping each item you access the properties correctly

<ul>
  {items.map((item) =>
    <li key={item.id}>
      {item.description}
    </li>
  )}
</ul>

0

146

Fetch and function error on AJAX and APIs call on reactjs

1 answers

0

Find remote jobs

Andres GPT