Estoy intentando actualizar las propiedades de un objeto principal mediante clics en los botones de los componentes secundarios. Después de hacer clic en el botón de incremento, ninguno de los componentes secundarios se actualiza.
NOTA: la identificación es puramente para diferenciar entre propA y B para guardar el estado
También hay una buena manera de tratar la actualización de las propiedades del objeto sin tener que hacer una declaración de cambio
import { useState } from "react"; import "./styles.css"; export default function App() { let [object, setObject] = useState({ propertyA: 0, propertyB: 0 }); function handleClick(id) { switch (id) { case 1: setObject((prevState) => ({ ...prevState, propertyA: prevState.propertyA + 1 })); break; case 2: setObject((prevState) => ({ ...prevState, propertyB: prevState.propertyB + 1 })); break; default: console.log(id); break; } } return ( <div className="App"> <Child id="1" title="property A" value={object.propertyA} handleClick={handleClick} /> <Child id="2" title="property B" value={object.propertyB} handleClick={handleClick} /> </div> ); } function Child(props) { return ( <div> {props.title} : {props.value} <button onClick={props.handleClick(props.id)}>Increment</button> </div> ); }onClick={props.handleClick(props.id)} debe ser onClick={()=>props.handleClick(props.id)} , y para evitar el switch , puede establecer la id como el nombre de la propiedad
<Child id="propertyA" title="property A" value={object.propertyA} handleClick={handleClick} />y entonces
function handleClick(id) { setObject((prevState) => ({ ...prevState, [id]: prevState[id] + 1 })) }