如何在React JS中显示API中的所有项目? [英] How to display all items from an API in React JS?
本文介绍了如何在React JS中显示API中的所有项目?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是我的代码，在这里我想添加代码以显示来自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;
解决方案
我尝试使用您的URL来获取产品，但显示该URL无法访问，因此我使用待办事项列表中的https://jsonplaceholder.typicode.com API对该简单应用进行了编码. /p>
希望此示例可帮助您了解如何从获取的数据中获取和显示项目.
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;
这里是另一个示例，其中返回的数据以对象的形式而不是上面的示例中的数组的形式出现:
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 &&
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数据中的元素
Below is my code, in this I want to add code to display all the products with its image from an API, how can I do that? Please help?
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;
解决方案
I tried your URL for fetching products but it is showing as not reachable so I have coded this simple app using https://jsonplaceholder.typicode.com API of the list of todos.
Hope this example helps you understand how to fetch and display items from fetched data.
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;
Here is another example, where the returned data is in the form of an object instead of an array in the above Example:
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 &&
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>
);
}
Here is the Codesandbox Example Showing how to Render elements from JSON data returned in the form of the object instead of Array Like the above example
这篇关于如何在React JS中显示API中的所有项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
