Question

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

这是我的代码：

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

您应该将您的请求包装在 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

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

2 个答案: