React函数组件联动更新状态触发无限渲染的解决方法

• 你在map渲染逻辑中直接调用setSubtotal：React组件每次渲染都会执行这段遍历逻辑，每次执行都会更新subtotal状态，状态更新又会触发组件重新渲染，形成无限循环。
• totalAmount、subtotal都属于派生状态，完全可以基于已有的order、discount、deliveryFee、taxes直接计算得出，不需要单独存为state、也不需要用useEffect做同步，冗余的state和useEffect反而会增加bug概率。

import { useState } from 'react';
import './styles.css';

function App() {
  // 如果后续order需要动态修改，把它改成state即可
  const order = [
    {
      qty: 2,
      name: 'Margarita A',
      variant: 'crab & cucumber',
      price: '412.00',
    }
  ];

  const [discount, setDiscount] = useState(759.5);
  const [deliveryFee, setDeliveryFee] = useState(12.0);
  const [taxes, setTaxes] = useState(46.15);

  // 直接计算派生值，不需要存state
  const subtotal = order.reduce((sum, item) => sum + Number(item.price), 0);
  const totalAmount = subtotal - discount + deliveryFee + taxes;

  return (
    <div className="app">
      <div className="container">    
          <div className="orderItems">
            {order.map((item, i) => {
              return (
                <div className="orderItem" key={i}>
                  <span className="orderItemPrice">₹{item.price}</span>
                </div>
              );
            })}
          </div>
        </div>

        <div className="summary">
          <span className="summaryTitle">Summary</span>
          <div className="total amountBox">
            <span>Total</span>
            <span>₹ {totalAmount}</span>
          </div>
        </div>
      </div>
      <div className="placeOrder">
        <button onClick={(e) => {
          // 直接调用上方的totalAmount变量即可拿到最新值
          console.log('订单总价：', totalAmount)
        }}>PLACE ORDER</button>
      </div>
    </div>
  );
}

export default App;

如果后续需要支持动态增删商品，只需要把order改成state：const [order, setOrder] = useState([...初始商品数据])，派生值的计算逻辑不需要修改，order变化后subtotal和totalAmount会自动更新。

内容的提问来源于stack exchange，提问作者Anand