我建议你做几件事：
1.在serviceItem中添加一些id属性。
1.删除const [amountToPay, setAmountToPay] = useState([]);
1.直接使用来自serviceItem集合值为此，您需要创建onChange处理程序，如下所示

const handleChange = (id) => (nextAmount) => {
    setServiceList(prevValue => {
       return prevValue.map(item => item.id === id ? { ...item, amount: nextAmount } : item) 
    }) 
}

并且支付金额可以很容易的从serviceItem集合中得到，没有效果或者其他状态

const procedurePriceTotal = serviceItem.reduce(
    (acc, item) => (acc = acc + item.amount),
    0
);

发生这种情况是因为您在onChange方法上设置了serviceItem，并使用传递serviceItem作为deps数组，以使用您在其中设置amountToPay效果因此，每次更改时，它都会追加到数组中
不要在 useEffect 中设置金额，而是创建一个方法并调用remove/add按钮，这样它只会在用户完成键入后调用。您还可以放置一个按钮“保存”或“calculate Amount”并调用handleSetAmountToPAY方法，该方法将更新金额。

import React, { useState, useMemo, useEffect } from "react";

export default function App() {
  //Values
  const [serviceItem, setServiceList] = useState([
    { serviceValue: "", quantityValue: "", amountToPay: "" }
  ]);
  console.log("SERVICE ITEM", serviceItem);

  //Add item function
  const handleItemAdd = () => {
    setServiceList([
      ...serviceItem,
      { serviceValue: "", quantityValue: "", amountToPay: "" }
    ]);
    handleSetAmountToPAY(serviceItem)
  };

  //Remove item function
  const handleItemRemove = (index) => {
    const list = [...serviceItem];
    list.splice(index, 1);
    setServiceList(list);
    handleSetAmountToPAY(list)
  };

  //Get Values
  const handleGetValues = (e, index) => {
    const { name, value } = e.target;
    const list = [...serviceItem];
    list[index][name] = value;
    setServiceList(list);
  };

  //Saving state to another state
  const [amountToPay, setAmountToPay] = useState([]);
  console.log("AMOUNT TO PAY", amountToPay);
  const handleSetAmountToPAY =  (list) => {
    list && list.map((item) =>
      setAmountToPay([...amountToPay, item.amountToPay])
    );
  }

  //Add total amount
  const procedurePriceTotal = amountToPay.reduce(
    (index, value) => (index = index + value),
    0
  );
  console.log("TOTAL PRICE", procedurePriceTotal);

  return (
    <div className="App">
      {serviceItem.map((singleItem, index) => (
        <div class="row form-row">
          <div class="col-12 col-md-6 col-lg-4">
            <div class="form-group">
              <label>
                Service <span class="text-danger">*</span>
              </label>
              <input
                name="serviceValue"
                type="text"
                class="form-control"
                value={singleItem.serviceValue}
                placeholder="Tooth Extraction"
                onChange={(e) => {
                  handleGetValues(e, index);
                }}
              />
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-3">
            <div class="form-group">
              <label>
                Quantity <span class="text-danger">*</span>
              </label>
              <input
                name="quantityValue"
                type="text"
                class="form-control"
                placeholder="1"
                value={singleItem.quantityValue}
                onChange={(e) => {
                  handleGetValues(e, index);
                }}
              />
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-3">
            <div class="form-group">
              <label>
                Amount (₱)<span class="text-danger">*</span>
              </label>
              <input
                name="amountToPay"
                type="number"
                class="form-control"
                placeholder="500"
                value={singleItem.amountToPay}
                onChange={(e) => {
                  handleGetValues(e, index);
                }}
              />
            </div>
          </div>
          <div class="col-12 col-md-6 col-lg-2">
            <div class="add-more">
              <br />
              {serviceItem.length !== 1 && (
                <button
                  type="submit"
                  onClick={() => handleItemRemove(index)}
                  className="btn btn-primary rx-pr"
                >
                  <i className="fas fa-plus" /> Remove Item
                </button>
              )}
            </div>
          </div>
        </div>
      ))}

      {/* Add Item */}
      <div className="add-more-item rx-pr">
        <button
          type="submit"
          onClick={handleItemAdd}
          className="btn btn-primary rx-pr"
        >
          <i className="fas fa-plus" /> Add Item
        </button>
      </div>
    </div>
  );
}

我用了错误的方法，我通过MapserviceItem，然后使用reduce来得到和，而不是把它再次放入一个单独的对象数组，然后再Map一次来得到和。

const newNumberArray = serviceItem.map(function(item) {
    return parseInt(item.amountToPay)
  })

 const totalAmountPaid =  newNumberArray.reduce((index,value) =>  index = index + value, 0 )

感谢所有的帮助和建议！