Каков наиболее удобный / обычный способ изменения определенного элемента в массиве в состоянии компонента React? - PullRequest
0 голосов
/ 04 июня 2018

Я часто испытываю трудности с манипулированием определенным элементом в массиве в состоянии компонента React.Например:

state={
menus:[
  {
    id:1,
    title: 'something',
    'subtitle': 'another something',
    switchOn: false
  },
  {
    id:2,
    title: 'something else',
    'subtitle': 'another something else',
    switchOn: false
  },
 ]
}

Этот массив заполнен объектами, которые имеют различные свойства.Одним из таких свойств, конечно же, является уникальный идентификатор.Это то, что я недавно сделал, чтобы отредактировать свойство «switchOn» для элемента в соответствии с его идентификатором:

handleSwitchChange = (id) => {

  const newMenusArray = this.state.menus.map((menu) => {    
    if (menu.id === id) {
      return {
        ...menu,
        switchOn: !menu.switchOn
      };
    } else {
      return menu;
    };
  })
  this.setState(()=>{
    return{
      menus: newMenusArray
    }
  })   

}

Как видите, много проблем, просто изменить одно значение.В AngularJS (1) я бы просто использовал тот факт, что объекты передаются по ссылке, и непосредственно изменял бы его, без какой-либо суеты ES6.

Возможно ли, что я что-то упустил, и есть многоболее простой подход для борьбы с этим?Любой пример будет принята с благодарностью.

Ответы [ 2 ]

0 голосов
/ 11 июня 2018

Я обычно использую findIndex

handleSwitchChange = (id) => {
  var index = this.state.menu.findIndex((item) => {
    return item.id === id;
  });

  if (index === -1) {
    return;
  }

  let newMenu = this.state.menu.slice();
  newMenu[index].switchOn = !this.state.menu[index].switchOn;

  this.setState({
    menu: newMenu
  });
}
0 голосов
/ 04 июня 2018

Хороший способ - создать индексированную карту.Как вы, возможно, знаете из баз данных, они не перебирают все записи, а используют индексы.Индексы - это просто способ сказать, что идентификатор А указывает на объект, где идентификатор - это *

. То, что я делаю, - это создание индексированной карты, например, с использованием редуктора

const map = data.reduce((map, item) => {
    map[item.id] = item;
    return map;
}, {})

, к которому вы можете получить доступваш элемент по идентификатору, просто сказав

map[myId]

Если вы хотите изменить его, вы можете использовать назначение объекта, или синтаксис ...

return {
    // copy all map if you want it to be immutable
    ...map
    // override your object
    [id]: {
        // copy it first
        ...map[id],
        // override what you want
        switchOn: !map[id].switchOn
    }
}

В качестве вспомогательной библиотеки,Я мог бы предложить вам использовать Immutable.js , где вы просто меняете значение, как если бы оно было ссылкой

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...