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

Posted 2023-02-24

【中文标题】如何为 React Native 中调用的每次 onPress 函数提供自动增量？

【英文标题】：How to provide auto-increment for every time onPress function called in React Native?

【发布时间】：2019-09-15 16:32:01

【问题描述】：

出于自学目的，我正在开发这个 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，我将不胜感激。

【问题讨论】：

<ListItem /> 的渲染效果如何？

我不明白你的问题？我在那里添加了我的 。当然是在地图功能中。

【参考方案1】：

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

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

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

【讨论】：

当您获取项目时，此方法有效。但是我将如何将具有自动索引值的状态添加（推送）到我的数组中？那是我最初的问题。如果您也可以查看我的 handleAddToList() 函数，我将不胜感激。

好吧，我假设您将这些 ID 保存在本地存储或类似的东西中。在componentWillMount() 上，您应该运行一个函数来检查您的存储并找到您已经做的最大 ID，然后使用这个最大 ID 更新状态，最后，在您的 handleAddToList 中，只需读取状态并增加一，然后更新状态。也就是说，我仍然建议不要使用 ID，如果您需要添加到列表中，只需在没有 ID 逻辑的情况下推送到数组，如果您需要删除一个项目，请使用“onClick”渲染<ListItem>，甚至更多或更少看起来像() => this.handleDeleteThis(index)

我在你最初的回答之后搜索索引然后我发现一篇文章说如果你在前端过滤列表项或删除并重新添加东西到你的数组中，索引不起作用。那篇文章说在前端创建自己的 ID 实际上效果更好。这种想法进入了我的脑海，这就是为什么我决定保留自己的版本而不是使用索引。

这里是文章的链接：medium.com/@robinpokorny/…

非常有趣！使用我解释的技术我个人还没有发现任何问题，当然只是另一种技术，使用更适合你的技术！

【参考方案2】：

这与您的 lastId 变量有关。可以这样修复：

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

【讨论】：

第二个变量当然应该是一个数组。这像巫师一样解决了我的问题。非常感谢！