Teniendo el siguiente codigo,
this.state = {
valores: ['A', 'B', 'C']
}
¿Cómo podría actualizar un elemento de este array? Del tipo:
this.setState({
valores[1]: 'a'
})
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadRecomiendo no mutar directamente el objeto del estado, en su lugar asignarlo a una variable y reasignarlo.
Aquí puedes leer algunas razones por las cuales no se debe mutar directamente https://daveceddia.com/why-not-modify-react-state-directly/
También podrías usar https://github.com/kolodny/immutability-helper
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this)
this.state = {
valores: ['a', 'b', 'c']
};
}
handleClick(e) {
e.preventDefault();
var valores = this.state.valores;
valores[0] = Math.random();
this.setState({valores: valores});
}
render() {
return (
<div>
<div>{this.state.valores}</div>
<button onClick={this.handleClick}>Cambiar primer valor</button>
</div>
);
}
};
ReactDOM.render(
<MyComponent />,
document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
No es para nada recomendable utilizar variables auxiliares ya que en componentes que manejen un state mas complejo se hace inmanejable mutar el estado de esta forma, para esto React provee Helpers que te ayudan a mutar el state cuando su estructura se vuelve mas compleja
https://facebook.github.io/react/docs/update.html
Así por ejemplo suponiendo que tu componente maneja mas variables en el state a parte de 'valores', utilizando Inmutability Helpers de React la implementación seria la siguiente (ES6)
import React from 'react'
import update from 'react-addons-update'
export default class ValoresComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
valores: ['A', 'B', 'C'],
otrosValores: {
objetoAdicional: {
attr: false,
attr1: 1
}
}
}
}
agregarD = () => {
this.setState(update(
this.state, { valores: {$push: 'D'} }
))
};
render() {
return(
<div>
<div>{this.state.valores}</div>
<button onClick={this.agregarD}>Agregar D</button>
</div>
)
}
}
De esta manera actualizas únicamente el array 'valores' y dejas intacto el resto de la estructura del state sin necesidad de realizar copias innecesarias ni usar variables auxiliares.