Tengo amounts
de objetos que se actualizan con los clics de los botones. Y paso ese objeto como accesorio a otro componente. Lo que estoy haciendo en este momento es actualizar el objeto de forma mutable en el evento de clic de botón.
onClick = e => { amounts.map( amount => (amount.tax = taxes ? 500 : 0) ); } <Display amounts={amounts} />
¿Cómo puedo actualizar las cantidades de forma inmutable?
Como se menciona en los comentarios, están sucediendo algunas cosas:
amounts
, por lo que React no se volverá a procesar en función de esta mutación.Array#map
para actualizar una sola propiedad. Esto actualizará la referencia del Objeto en el cobro de importes.setAmounts
ni nada similar para actualizar el valor de la propiedad de amount
en un componente principal. Suponiendo que está utilizando useState
en el componente principal de <Display />
s, tendrá que pasar la función setAmounts
al componente <Display />
usando props.
<Display amounts={amounts} setAmounts={setAmounts} />
onClick = e => { setAmounts( amounts.map( amount => ({ ...amount, tax: taxes ? 500 : 0 }) ); ); }