Как обеспечить автоинкремент при каждом вызове функции onPress в React Native? - PullRequest
Новая
       49

Как обеспечить автоинкремент при каждом вызове функции onPress в React Native?

1 голос
/ 26 апреля 2019

Я работаю над этим проектом React Native в целях самообучения.Каждый раз, когда я нажимаю кнопку отправки, я бы хотел, чтобы значение id автоматически увеличивалось.Например, если идентификатор последнего отправленного элемента был 7, я хочу, чтобы новый идентификатор был 8. Я подумал, что если я смогу найти самое высокое значение в строке идентификаторов, то я могу добавить к нему 1 и создать новый идентификатор для нового отправленного элемента.вещь.Я оглянулся и нашел решение, подобное этому: 

  handleAddToList = () => {
    let items = [...this.state.items];
    let lastId = Math.max.apply(null, items.id);
    let newId = lastId + 1;

    items.filter(i => i.title == this.state.text).length === 1
      ? alert("This item is on the list already.")
      : items.push({
          id: newId,
          title: this.state.text,
          found: 0,
          value: 0,
          icon: "delete"
        });
   this.setState({ items: items });
  };

И вот моя маленькая форма, в которой я отправляю текст: 

<Input
 placeholder="Start typing"
 label={"Your next shop list item..."}
 onChangeText={text => this.setState({ text })}
/>
<Button title="Add to list" onPress={() => this.handleAddToList()} />

Моя функция фактически добавляет элемент дляв первый раз, но когда я добавляю новый элемент, я получаю следующее предупреждение: 

Warning: Encountered with two children with the same key, '"-infinity"'.

И вот как я перечисляю свои элементы: 

<ListItem
 key={l.id}
 title={l.title}
 rightIcon={{ name: l.icon, color: "#cc0033" }}
 bottomDivider={true}
/>

Это означает, что lastId и newIdчасти моего кода не работают должным образом.

Буду признателен за помощь в увеличении моего идентификатора с каждым новым отправленным элементом.

Ответы [ 2 ]

1 голос
/ 26 апреля 2019

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

{
  this.state.item.map((item, index) => (
    <ListItem 
      key={index} 
      title={item.title} 
      rightIcon={{ name: item.icon, color: "#cc0033" }} 
      bottomDivider={true} 
    />
  )
}

Примечание. Причина, по которой вы хотите , а не создавать идентификаторы локально, заключается в том, что в большинстве случаев уникальные идентификаторы уже получены из серверной части.

1 голос
/ 26 апреля 2019

это ваша переменная lastId.который можно исправить так: 

Math.max.apply(null, items.map(item => item.id))
...