React服务器每秒向后端API发送4个请求

Question

所以我正在尝试制作一个web应用程序，它从后端API获取产品并将其显示到React前端，但这里的问题是React前端服务器每秒发送4-5个请求，这对后端服务器来说可能非常紧张。有没有什么方法可以让它在每次加载页面时只发送一个请求？

这是我的代码：

import React, {useState, useEffect} from 'react'
import { Card } from 'react-bootstrap'
import axios from 'axios'

function HomeScreen() {
const [products, setProducts] = useState([])
async function getProducts() {
try {
const response = await axios.get('http://localhost:8000/api/products/');
setProducts(response.data);
} catch (error) {
console.error(error);
}
}
getProducts()
return (
<div>
{products.map(product => (
<Card className="my-3 p-3 rounded">
<Card.Img src={'http://localhost:8000' + product.image} />
<Card.Body>
<Card.Title as="div">
<strong>{product.name}</strong>
</Card.Title>
<Card.Text as="div">

</Card.Text>
<Card.Text as="h3">
${product.price}
</Card.Text>
</Card.Body>
</Card>
))}
</div>
)
}
export default HomeScreen

Answer 1

您应该将yoUr请求封装在useEffect钩子中。这样可以防止每次组件状态更改时调用函数。

useEffect(() => {
async function getProducts() {
try {
const response = await axios.get('http://localhost:8000/api/products/');
setProducts(response.data);
} catch (error) {
console.error(error);
}
}
getProducts()
},[])

现在，在组件安装后，您的请求将只发送一次。

Answer 2

这里的问题是，您在功能组件内部使用getProducts方法时没有任何条件，因此它会不断重新渲染。这就是你修复它的方法：

当组件安装时，使用名为useEffect的钩子来调用getProducts方法

import React, {useState, useEffect,useEffect} from 'react'
import { Card } from 'react-bootstrap'
import axios from 'axios'

function HomeScreen() {
const [products, setProducts] = useState([])
useEffect(()=>{
// eslint-disable-next-line   
getProducts();
},[]);
async function getProducts() {
try {
const response = await axios.get('http://localhost:8000/api/products/');
setProducts(response.data);
} catch (error) {
console.error(error);
}
}

return (
<div>
{products.map(product => (
<Card className="my-3 p-3 rounded">
<Card.Img src={'http://localhost:8000' + product.image} />
<Card.Body>
<Card.Title as="div">
<strong>{product.name}</strong>
</Card.Title>
<Card.Text as="div">

</Card.Text>
<Card.Text as="h3">
${product.price}
</Card.Text>
</Card.Body>
</Card>
))}
</div>
)
}
export default HomeScreen