Блог

Главная - Вопросы по программированию - я застрял, как получить доступ к элементу name из API в моем проекте react, я дал снимок API и мой код ниже, может ли кто-нибудь мне помочь

я застрял, как получить доступ к элементу name из API в моем проекте react, я дал снимок API и мой код ниже, может ли кто-нибудь мне помочь

#javascript #reactjs

Вопрос:

 function Shop() {

  useEffect(() => {
    fetchItems();
  }, []);

  const [items, setItems] = useState([]);

  const fetchItems = async() => {
    const data = await fetch('https://fortnite-api.theapinetwork.com/upcoming/get');
    const items = await data.json();
    console.log(items.data);
    setItems(items.data);
  };

  return (
    <div>
      {items.map(item => (
        <h1>{item.name}</h1>
      ))}
    </div>
  );

я не могу получить доступ к элементу name из API

*снимок API в журнале консоли приведен ниже *]1

Комментарии:

1. Просто попробуйте console.log(данные); потому что он уже в формате json . если вы хотите получить доступ к элементам, попробуйте: console.log(данные.данные? .пункт);

2. А, @Тимми? data будет объектом ответа на выборку — это просто плохое имя для переменной

Ответ №1:

При просмотре данных каждый элемент массива имеет свойство, которое называется item свойством , которое называется name

Итак, вы хотите

 <h1>{item.item.name}</h1>

в полном объеме это было бы

   return (
    <div>
      {items.map(item => (
        <h1>{item.item.name}</h1>
      ))}
    </div>
  );

mapybe вы можете использовать как другое имя для аргумента обратного вызова

   return (
    <div>
      {items.map(element => (
        <h1>{element.item.name}</h1>
      ))}
    </div>
  );

или даже

   return (
    <div>
      {items.map(({item}) => (
        <h1>{item.name}</h1>
      ))}
    </div>
  );
 
 const fetchItems = async() => {
  const res = await fetch('https://fortnite-api.theapinetwork.com/upcoming/get');
  const items = await res.json();
  return items.data;
};
// testing if items would be what is required
(async() => {
  const items = await fetchItems();
  const result = items.map(({item}) => item.name);
  console.log(result);
})();

Ответ №2:

Вот вам и ответ:

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

export default function App() {
  useEffect(() => {
    fetchItems();
  }, []);

  const [items, setItems] = useState([]);

  const fetchItems = async () => {
    const data = await fetch(
      "https://fortnite-api.theapinetwork.com/upcoming/get"
    );
    const items = await data.json();
    setItems(items.data);
  };

  return (
    <div>
      {items.map((item, i) => (
        <h1 key={i}>{item.item.name}</h1>
      ))}
    </div>
  );
}

Комментарии:

1. это ответ, а не ответ

Ответ №3:

 fetch("https://fortnite-api.theapinetwork.com/upcoming/get")
.then((res) => res.json())
.then((data) => {
    console.log(data.data[0].item.name)
    }

Для получения дополнительной информации ознакомьтесь с моей песочницей здесь : https://codesandbox.io/s/pensive-haibt-i673h?file=/src/App.js:165-327

Комментарии:

1. пожалуйста, не отвечайте на вопросы, где (возможно) полезная информация содержится во внешней ссылке, которая может легко «устареть» или «исчезнуть» … или еще хуже

Метки: , , ,