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