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

​