javascript - español - react meta tags

Cómo actualizar el objeto en estado React

Question

Tengo una lista indexada de users en el objeto JS (no matriz). Es parte del estado React.

{
    1: { id: 1, name: "John" }
    2: { id: 2, name: "Jim" }
    3: { id: 3, name: "James" }
}

¿Cuál es la mejor práctica para:

1. agregue un nuevo usuario {id: 4, nombre: "Jane"} con id (4) como clave
2. eliminar un usuario con id 2
3. cambia el nombre del usuario # 2 a "Peter"

Sin ningún ayudante inmutable. Estoy usando Coffeescript y un guión bajo (por lo que _.extend está bien ...).

Gracias.

Answer 1

Además de _.extender, puede usar Map para almacenar user

let user = new Map();
user.set(4, { id: 4, name: "Jane" }); //adds with id (4) as key
user.myMap.set(2, { id: 2, name: "Peter" }); // set user #2 to "Peter"
user.delete(3); //deletes user with id 3

Answer 2

Esto es lo que yo haria

• agregar: var newUsers = _.extend({}, users, { 4: { id: 4, ... } })
• eliminar: var newUsers = _.extend({}, users) luego delete newUsers[''2'']
• cambiar: var newUsers = _.extend({}, users) luego newUsers[''2''].name = ''Peter''

Answer 3

Si no está utilizando Flux, use this.setState () para actualizar el objeto de estado.

delUser(id) {
    const users = this.state.users;
    delete users[id];
    this.setState(users);
}

addChangeUser(id, name) {
    const users = this.state.users;
    users[id] = {id: id, name: name};
    this.setState(users);
}

Entonces puedes ejecutar tus casos de prueba con esto:

addChangeUser(4, ''Jane);
addChangeUser(2, ''Peter'');
delUser(2);

Answer 4

Usando spreads:

Añadiendo

this.setState({
  ...this.state,
  4: { id: 4, name: "Jane" },
}

Quitando id 2

let prevState = this.state;
let {"2": id, ...nextState} = prevState;
this.setState({
  ...nextState,
}

Cambio de id 2

this.setState({
  ...this.state,
  2: {
    ...this.state["2"],
    name: "Peter",
  }
}

Answer 5

setState también acepta una función, que podría encontrar más intuitiva

function add( user ) {
  this.setState( users => {
    users[ user.id ] = user
    return users
  }
}

function remove( id ) {
  this.setState( users => {
    delete users[ id ]
    return users
}

Estas funciones suponen que su objeto de state es su objeto de users , si en realidad es estado. Los state.users entonces tendrían que elegir a los users , al pasar una función a setState siempre se le llamará pasar el objeto de state real.

En este ejemplo, add también se puede usar para enmendar, dependiendo de su caso de uso real, es posible que desee crear ayudantes por separado.