Problema: estoy tratando de modificar solo un elemento de los datos del plan usando this.setState({ planData: { id: plan }}); pero al hacerlo, todos mis otros elementos se vuelven indefinidos. Encontré una solución al agregar todos los demás elementos a mi setState, pero no se ve bien en absoluto. ¿Hay alguna manera de modificar solo un elemento de planData sin tener que configurar todos los demás al mismo tiempo?
Código de muestra:
class Pricing extends Component { constructor() { super(); this.state = { planData: { id: 3, price: 0, vpnEnabled: false, cloudEnabled: false, cloudSpace: 0 } }; } planHandler(plan) { this.setState({ planData: { id: plan }}); } render() { <div> <button onClick={() => this.planHandler(2)}>Submit</button> </div> } }Puede difundir el estado existente para mantener los valores existentes.
planHandler(plan) { const data = this.state.planData this.setState({ planData: { ...data, id: plan }}); }Acceda a planData desde el estado usando this.state.planData
Necesita el operador de propagación - ... .
planHandler(plan) { this.setState({ planData: { ...(this.state.planData), id: plan }}); } Los saltos de propagación abren las claves y propiedades del objeto. Dado que el código anterior conducirá a la clave de id dos veces, el más tarde anula el primero.
Puede usar el operador de propagación para hacerlo algo así como
planHandler(plan) { this.setState({ planData: {...this.state.planData, id: plan }}); }Esto mantendrá intactos los otros valores mientras se actualizan las cosas que necesitamos actualizar.