如何为 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，您可以使用索引作为键呈现您的项目并避免在前端使用 handling/creating 唯一 ID。

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

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

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

How to provide auto-increment for every time onPress function called in React Native?

native

increment

auto-increment

reactjs

react-native