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 }) ); ); }