reactjs - qué - react comunicacion entre componentes

¿Cuál es la mejor manera de actualizar un objeto en una matriz en ReactJS?

Question

Si tiene una matriz como parte de su estado, y esa matriz contiene objetos, ¿cuál es una forma fácil de actualizar el estado con un cambio en uno de esos objetos?

Ejemplo, modificado desde el tutorial en reaccionar:

var CommentBox = React.createClass({
getInitialState: function() {
return {data: [
{ id: 1, author: "john", text: "foo" },
{ id: 2, author: "bob", text: "bar" }
]};
},
handleCommentEdit: function(id, text) {
var existingComment = this.state.data.filter({ function(c) { c.id == id; }).first();
var updatedComments = ??; // not sure how to do this
this.setState({data: updatedComments});
}
}

Answer 1

Cuando trabajas con una matriz, necesitas pasar un atributo personalizado, en mi ejemplo, estoy pasando
atributo de data-index data- , data- es un prefijo cuando pasa un atributo personalizado, también es una convención html 5,
Esta es la misma forma en que actualizamos la array en Reducer .

Ex:

//handleChange method
handleChange(e){
//getting custom attribute value.
let i = e.target.getAttribute(''data-index''),
obj = Object.assign({}, this.state.arr[i],{[e.target.name]: e.target.value});
//update state value.
this.setState({arr: [...this.state.arr.slice(0, i), obj, ...this.state.arr.slice(i + 1)]})
}

Answer 2

Mientras se actualiza el estado, la parte clave es tratarlo como si fuera inmutable. Cualquier solución funcionaría bien si puede garantizarlo.

Aquí está mi solución usando inmutability-helper :

jsFiddle: http://jsfiddle.net/eLmwf14a/

 var update = require(''immutability-helper'');
handleCommentEdit: function(id, text) {
var data = this.state.data;
var commentIndex = data.findIndex(function(c) {
return c.id == id;
});
var updatedComment = update(data[commentIndex], {text: {$set: text}});
var newData = update(data, {
$splice: [[commentIndex, 1, updatedComment]]
});
this.setState({data: newData});
},

Las siguientes preguntas sobre arreglos de estado también pueden ayudar:

• Correcta modificación de las matrices de estado en ReactJS
• ¿Cuál es la forma preferida de mutar un estado Reaccionar?

Answer 3

Me gusta mucho hacer esto con Object.assign en lugar de los helpers de inmutabilidad.

handleCommentEdit: function(id, text) {
this.setState({data: this.state.data.map(
(el)=> el.id === id ? Object.assign({}, el, {text: text}) : el
});
}

Simplemente creo que esto es mucho más breve que empalmar y no requiere conocer un índice ni manejar explícitamente el caso no encontrado.

Answer 4

Intentando limpiar / explicar mejor cómo hacer esto Y qué está pasando.

• Primero, encuentre el índice del elemento que está reemplazando en la matriz de estado.
• En segundo lugar, update el elemento en ese índice
• En tercer lugar, llame a setState con la nueva colección

import update from ''immutability-helper'';
// this.state = { employees: [{id: 1, name: ''Obama''}, {id: 2, name: ''Trump''}] }
updateEmployee(employee) {
const index = this.state.employees.findIndex((emp) => emp.id === employee.id);
const updatedEmployees = update(this.state.employees, {$splice: [[index, 1, employee]]}); // array.splice(start, deleteCount, item1)
this.setState({employees: updatedEmployees});
}