如何防止不需要的重新渲染以停止反应 js 中的另一个 API 调用？

Question

这是一个父组件（Cart）和一个子组件（CartItem）。

在父级中，有一个button，它依赖于通过道具传递给子级的checkAvailability函数改变的状态，

import {useState} from "react";
import CartItem from "./CartItem";

const Cart = ({cart}) => {
    const [available, setAvailable] = useState(true);

    const checkAvailability = (check) => {
        setAvailable(check)
    }


    return (
        <>
          {cart.items.map((item) => (
              item.is_valid && 

                  <CartItem 
                      key={item.id}
                      checkAvailability={checkAvailability}
                  />
          ))}


          <button disabled={available} >Click Me!</button>
        </>
    )
}

export default Cart;

在 child 组件中，API 调用 返回由useEffect 调用的true or false。

import {useState, useEffect} from "react";


const CartItem = ({checkAvailability}) => {
const [newData, setNewData] = useState(null);


    const handleCheck = async () => {
    
       const data = await api.call();
        setNewData(data)
       
       if(newData.available === false) {
        checkAvailability(false)
       } else if(newData.available === true) {
        checkAvailability(true)
       }
    };

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



    
    return (
        <div> Item </div>
    )
};

export default CartItem;

问题：

每次挂载组件时，子组件中的 API 调用都会返回一个值，该值通过 checkAvailability 函数作为道具传递给父组件，这会更改父组件中的状态，当状态更改时 重新渲染发生，无限重启循环。

• 主要是当 API 调用返回 {false} 值时按钮被禁用。如果这种方式不起作用，还有其他方法吗？

解决办法是什么？

Answer 1

即使您解决了当前无限重新渲染的问题，如果有多个 <CartItem/> 组件，您仍然会有多个 API 请求。

更好的方法是将 API 调用移至父级。这将确保它被调用一次，而不管它有多少购物车项目。如果购物车项目需要知道available 的值，则将其传递给它们。

const CartItem = ({ available }) => {
  return <div> Item </div>
}