Неопределенные значения при использовании массива карты в Javascript - PullRequest
Новая
       5

Неопределенные значения при использовании массива карты в Javascript

0 голосов
/ 28 августа 2018

У меня проблема при попытке получить значения из объекта и передать его потомку. Это мой код: 

let listDomestic = this.state.domesticArray.map((item) => 
      <DomesticItem 
        key={item.id}
        index={item.index}
        deleteMethod={() => this.deleteDomesticElement(key)}
      />
    );

проблема в key={item.id} и index={item.index}, поэтому key и index не определены, я вижу это, печатая их в дочернем

Моя функция добавления объектов в domesticArray выглядит так: 

addDomesticItem() {
    let id = Date.now();
    let index = this.state.domesticArray.length;
    let newItem = {
      id: id,
      index: index,
      quantity: 0,
      watt: 0,
      duration: 0,
      whDay: 0,
    }

    let newDomesticArray = [...this.state.domesticArray];
    newDomesticArray.push({
      newItem
    });

    this.setState({
      domesticArray: newDomesticArray
    });
  }

1 Ответ

0 голосов
/ 28 августа 2018

Ваш код создает новый объект и устанавливает newItem как свойство для него (имя свойства newItem, вы непреднамеренно используете сокращенную запись свойства), а затем отправляете этот новый элемент в массив.

Минимальное изменение - изменить это: 

newDomesticArray.push({
  newItem
});

к этому: 

newDomesticArray.push(newItem);

Но

  1. Вам необходимо использовать версию обратного вызова setState, а не версию, которой вы передаете объект. Это потому, что вы устанавливаете новое состояние на основе существующего состояния и [обновления состояния асинхронны и могут быть объединены] [1].

  2. Мы можем сделать это более кратким. : -)

Итак, просто обратимся к этим двум вещам и используем деструктуризацию параметров: 

addDomesticItem() {
    this.setState(({domesticArray}) => {
        const newItem = {
          id: Date.now(),
          index: domesticArray.length,
          quantity: 0,
          watt: 0,
          duration: 0,
          whDay: 0,
        };
        return {domesticArray: [...domesticArray, newItem]};
    });
}

Но (часть 2):

  1. Я рекомендую вам не полагаться на Date.now для id. Если вы когда-нибудь добавите два элемента в течение одной миллисекунды (помните, что компьютеры быстрые ), у них не будет уникальных идентификаторов.

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

Вместо этого в вашем компоненте будет постоянно увеличивающийся счетчик, который вы используете для значений id. В вашем конструкторе: 

this.idAllocator = 0;

и затем: 

addDomesticItem() {
    this.setState(({domesticArray}) => {
        const newItem = {
          id: ++this.idAllocator,
          quantity: 0,
          watt: 0,
          duration: 0,
          whDay: 0,
        };
        return {domesticArray: [...domesticArray, newItem]};
    });
}

и затем: 

let listDomestic = this.state.domesticArray.map((item, index) => 
      <DomesticItem 
        key={item.id}
        deleteMethod={() => this.deleteDomesticElement(key)}
      />
    );

и затем, когда вам нужно найти элемент в this.state.domesticArray, вы используете find: 

const item = this.state.domesticArray.find(item => item.id === id);

или findIndex, чтобы найти его индекс: 

const index = this.state.domesticArray.findIndex(item => item.id === id);

и помните, что если вы собираетесь использовать index для изменения domesticArray, вам нужно сделать это в setState обратном вызове.

...