Блог

Главная - Вопросы по программированию - Как отобразить все элементы из API в React JS?

Как отобразить все элементы из API в React JS?

#javascript #html #reactjs #jsx

#javascript #HTML #reactjs #jsx

Вопрос:

Ниже приведен мой код, в нем я хочу добавить код для отображения всех продуктов с их изображением из API, как я могу это сделать? Пожалуйста, помогите?

 import React, {useState, useEffect} from 'react'
import "bootstrap/dist/css/bootstrap.min.css"
import Axios from "axios"

function Products() {

const [products, setProducts] = useState({});

const fetchProducts = async () => {
const {data} = await Axios.get('https://api.test.ts/demo/test');  
const products= data
setProducts(products);
};

useEffect(() => {

  fetchProducts()

 }, []);

 return(
     
     <div>
         Want to Display list of products from API
     </div>
 )

}

export default Products;

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

1. можете ли вы сказать мне, в чем проблема? Ваша проблема в том, что вы не знаете, как получить данные о продуктах и использовать их в Webhook? Или вы не знаете, как отображать данные в JSX в React?

Ответ №1:

Я попробовал использовать ваш URL-адрес для получения продуктов, но он отображается как недоступный, поэтому я закодировал это простое приложение, используя https://jsonplaceholder.typicode.com API из списка задач.

Надеюсь, этот пример поможет вам понять, как извлекать и отображать элементы из выбранных данных.

 import React, { useState, useEffect } from "react";
import "./styles.css";
import Axios from "axios";

function App() {
  const [products, setProducts] = useState([]);

  const fetchProducts = async () => {
    const { data } = await Axios.get(
      "https://jsonplaceholder.typicode.com/todos/"
    );
    const products = data;
    setProducts(products);
    console.log(products);
  };

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

  return (
    <div>
      {products.map((product) => (
        <p key={product.id}>{product.title}</p>
      ))}
    </div>
  );
}

export default App;

Ссылка на CodeScandbox

Вот еще один пример, где возвращаемые данные представлены в виде объекта вместо массива в приведенном выше примере:

 import React, { useState, useEffect } from "react";
import "./styles.css";
import Axios from "axios";

const productsData = {
  note: "",
  notification: "",
  Books: [
    {
      bookID: 65342,
      img: "https://source.unsplash.com/200x300/?book",
      year: 2018,
      bookTitle: "Story Time",
      LibraryInfo: {
        Status: "Out",
        returnDate: "7 Jan"
      }
    },
    {
      bookID: 65332,
      img: "https://source.unsplash.com/200x300/?book",
      year: 2018,
      bookTitle: "Story Time",
      LibraryInfo: {
        Status: "Out",
        returnDate: "7 Jan"
      }
    }
  ]
};
export default function App() {
  const [products, setData] = useState(productsData);
  const [toggle, setToggle] = useState({});
  useEffect(() => {
    setData({});
    Axios.get("https://stylmate1.firebaseio.com/hair.json").then((response) => {
      // console.log(response.data);
      setData(productsData);
    });
  }, [toggle]);
  return (
    <div className="App">
      {/* <button onClick={() => setToggle(!toggle)}>fetch</button> */}
      {products?.["Books"]?.length amp;amp;
        products["Books"].map((product) => (
          <div key={Math.random() * 10000}>
            <img src={product.img} width="200" alt="" />
            <p>{product.bookTitle}</p>
            <p>{product.year}</p>
            <p>
              {"Library Status: "  
                product.LibraryInfo.Status  
                "n"  
                product.LibraryInfo.returnDate}
            </p>
            <p></p>
          </div>
        ))}
    </div>
  );
}

Вот пример Codesandbox, показывающий, как отображать элементы из данных JSON, возвращаемых в виде объекта, а не массива, как в приведенном выше примере

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

1. Вы забыли использовать «ключ» prop.

2. отображение:- Ошибка типа: products.map не является функцией. Нужно извлечь данные из объекта, так что .map может работать здесь?

3. вы можете преобразовать объект в массив с Object.entries() помощью и использовать этот массив для отображения через него

4. если возможно, поделитесь URL-адресом api, чтобы я мог видеть данные, которые он возвращает, тогда только я могу дать точный ответ

5. или вставьте данные, которые возвращаются из запроса Axios get

Ответ №2:

    return (
     <div>
       {products.map((product, index) => (
        <p key={index}>{product.title}</p>
       ))}
     </div>
   );

Рекомендуется иметь идентификатор продукта, вместо того, чтобы использовать индекс массива в качестве ключевого элемента.

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

Этот «ключевой» реквизит помогает React обнаруживать и изменять измененные элементы, используя их уникальный «ключевой» реквизит.

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

1. отображение:- TypeError: products.map не является функцией. Нужно извлекать данные из объекта, поэтому .map может работать здесь?

2. это связано с тем, что ваша переменная ‘products’ имеет значение null, вы можете увидеть это с помощью консоли. регистрируя переменную данных, которую вы получили после того, как извлекли API, попробуйте проверить, правильно ли вы выполнили выборку.

Метки: