使用功能組件中的另一個狀態更新狀態

我有一個狀態，每次另一個狀態改變時都需要更新。所以我使用了另一個狀態的依賴陣列項的使用效果，但它導致了無限渲染。我想使用這些變數作為狀態。我希望 totalAmount 是一個狀態變數，其他變數需要成為狀態（折扣小計等）。有什么辦法可以解決這個問題。

應用程式.js

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

function App() {
  let order = [
    {
      qty: 2,
      name: 'Margarita A',
      variant: 'crab & cucumber',
      price: '412.00',
    }
  ];


  let [discount, setDiscount] = useState(759.5),
    [deliveryFee, setDeliveryFee] = useState(12.0),
    [taxes, setTaxes] = useState(46.15),
    [subtotal, setSubtotal] = useState(0),
    [totalAmount, setTotalAmount] = useState(0);
  useEffect(() => {
    setTotalAmount(subtotal - discount   deliveryFee   taxes);
  }, [subtotal, discount, deliveryFee, taxes]);

  return (
    <div className="app">
      <div className="container">    
          <div className="orderItems">
            {order.map((item, i) => {
              // subtotal  =  item.price;
              setSubtotal((prev) => prev    item.price);

              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) => {}}>PLACE ORDER</button>
      </div>
    </div>
  );
}

export default App;

uj5u.com熱心網友回復：

問題

問題不在于您的useEffect鉤子，它作業正常并在組件安裝時呼叫一次。問題出setSubtotal((prev) => prev item.price);在你的return方法中。

狀態變數的每次更改都會導致重新渲染，每次重新渲染order.map都會重新創建。所以在期間改變狀態order.map會導致重新渲染，而重新渲染會導致order.map再次繪制。這是您無限重新渲染的原因。

注意：您可以簡單地setState對map函式內部進行注釋以阻止這種行為。

解決方案

有一些選項可以控制這種情況，例如使用useRefforsubtotal來防止重新渲染的原因。

此外，您可以在計算和設定鉤子之前計算鉤子的subtotal內部。useEffecttotalAmount

function App() {
  let order = [
    {
      qty: 2,
      name: "Margarita A",
      variant: "crab & cucumber",
      price: "412.00"
    }
  ];

  const [discount, setDiscount] = useState(59.5);
  const [deliveryFee, setDeliveryFee] = useState(12.0);
  const [taxes, setTaxes] = useState(46.15);
  const [subtotal, setSubtotal] = useState(0);
  const [totalAmount, setTotalAmount] = useState(0);

  useEffect(() => {
    const localSubtotal = order.reduce(
      (acc, curr) => (acc  = Number(curr.price)),
      0
    );

    setSubtotal(localSubtotal);
    setTotalAmount(localSubtotal - discount   deliveryFee   taxes);
  }, [discount, deliveryFee, taxes, order]);

  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>
        <div className="summary">
          <div>
            <span>Sub Total: {subtotal}</span>
          </div>
          <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) => {}}>PLACE ORDER</button>
      </div>
    </div>
  );
}

export default App;

注意：不要忘記order在useEffecthook 中傳遞依賴陣列中的陣列。

標籤：javascript 反应 网络

上一篇：對除第一列以外的所有列求和

下一篇：為什么在MERN堆疊中找不到我的POST路由？