最初我想問如何在地圖中呼叫一個函式，但我意識到我呼叫函式的方式并沒有做錯，所以我認為我的代碼是錯誤的。
所以我想對一張地圖的所有價格進行匯總，我正在渲染，有時這些價格會因為人們可能想要的數量而改變，所以我在呼叫：
//My function call inside the map。
{calculateTotal（fixedPrice）}。
//該函式
const calculateTotal=（price）=> {
setTotalPrice (totalPrice price)
}
但是我在回傳時得到了這個錯誤
我不明白，兩個數字相加一定的次數（在這個例子中是9），怎么會導致無限回圈。我想做的是把所有的價格加到一個變數中，如果cantidad/quantity發生變化，也要加上這些變化。
整個代碼，如果你需要它
import React, { useState, useEffect } from 'react
import { auth, db } from './firebase'/span>;
import { useHistory } from 'react-router-dom';
import { Checkbox } from '@material-ui/core'/span>;
function CrearPedidos({user}) {
const [libros, setLibros] = useState（[]）。
const [cantidad, setCantidad] = useState( new Array(libros. length).fill(1)）。)
useEffect(()=>/span>{
setCantidad(new Array(libros. length).fill（1）)
}, [libros])
const history = useHistory(""/span>)。
const [totalPrice, setTotalPrice] = useState（）。
const librosRef = db.collection('libros') 。
const queryRef = librosRef.where('grado', '==', '4° grado')。
useEffect(() => {
queryRef.orderBy("precio"/span>)
.get()
.then((snapshot) => {
const tempData = [] 。
snapshot.forEach((doc) =>/span> {
const data = doc.data（）。
tempData.push（data）。
});
setLibros（tempData）。
});
}, []);
const mas=（index）=> {
setCantidad（cantidad[index] ）。
setCantidad([...cantidad])
};
const menos=（index）=> {
if（cantidad[index] > 0）{
setCantidad（cantidad[index]--）。
setCantidad([...cantidad])
}
else {
window.alert("Sorry, Zero limit reached"/span>)。
}
};
const calculateTotal = （price）=> {
setTotalPrice (totalPrice price)
}
return (
<div className="listado_Pedidos">/span>
<div className="estudiantes_container"/span>>
<h1 className = "estudiantes_container_h1">/span>Estudiante: {user. displayName}</h1>Estudiante: {user.
<h1 className = "estudiantes_container_h1"/span>> Libros Nuevos</h1>。
<div className ="tableContainer"/span>>
<table>
<thead>
<tr className="Lista">
<th>/span>Cantidad</th>
<th>/span>Grado</th>/span>
<th>/span>Descripcion</th>/span>
<th>編輯部</th>/span>
<th>/span>Precio</th>/span>
</tr>/span>
</thead>/span>
<tbody>
{libros.map((libros, index, fixedPrice) => (
<tr key={libros.id || index}>/span>
<td>
<button onClick = {（） => mas（index）}/>
{cantidad[index]}
{console.log(cantidad)}
<button onClick = {() => menos(index)}/>
</td>
<td>{libros.grado}</td>/span>
<td>/span>
<input onChange = {（event） => {
讓checked = event.target.checked。
}}
type="checkbox" checked = "">
</input>
{libros.descriptionpcion}
</td> {libros.descripcion}
<td>/span>{libros.editorial}</td>
<td>${fixedPrice = parseFloat(libros.precio).toFixed(2) * cantidad[index]}</td>
{calculateTotal(fixedPrice)}計算總價
</tr>
))
}
</tbody> )。
</table>/span>
</div>
<div className="space" />
< button onClick="{realizarPedidos}" className = "crear_estudiante_boton" > Realizar Pedidos</button>。
<div className="space" />/span>
</div>
</div>>
)
}
export default CrearPedidos
uj5u.com熱心網友回復：
正如@Danial所說，你正在多次更新狀態，速度非常快，這引發了頁面渲染，并拋出了你得到的錯誤。
要對陣列中的所有專案進行求和，請使用reduce陣列函式而不是map。
參考文獻。
每當 "cantidad "上升或下降時，它也會更新！
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/322447.html
標籤：