如何在React Native中调用的每次onPress函数中提供自动增量？

Question

我正在研究这个React Native项目，用于自学习目的。每次按下提交按钮，我都想id值自动增加。例如，如果最新提交的项目的ID是7，我希望新的ID为8.我想如果我能在我的ID行中找到最高值，那么我可以为它添加1并为新提交的新ID项目。我环顾四周，想出了这样的解决方案：

  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部分无法正常工作。

对于如何使用每个新提交的项目增加ID，我将不胜感激。

Answer 1

这是关于你的lastId变量。这是可以修复的：

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

Answer 2

你似乎已经找到了上面的答案。在任何情况下，如果您想避免跟踪本地ID，您可以使用索引作为键来呈现您的项目，并避免在前端处理/创建唯一ID。

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

注意：您不希望在本地创建ID的原因是因为大多数时候唯一ID已经来自后端。