React.js：在做乐观创建时如何生成一个键？_JavaScript

使用React.js非常有趣。

我根据官方教程构建了一个简单的评论应用程序。

您可以添加，编辑和删除评论。 它们每10秒通过GET拉动一次。

有一次，本教程提到了乐观更新：在创建，更新或删除操作的情况下，在服务器响应之前更新UI。

由于评论是列表的一部分，因此React建议为每个评论分配一个唯一的密钥。

因此，我使用每个注释的数据库ID作为键。 这适用于更新和删除操作。

但是，在创建操作的情况下，在实际创建服务器端之前，我不知道注释的数据库ID，因此我不知道要为该键分配什么值。

在那个时间点，评论被添加到评论列表但没有密钥/ ID，因此无法编辑或删除，直到列表在下一次API轮询期间更新。

我可以解决这个问题吗？

如果您需要密钥在更新中保持相同，则可以选择将临时ID分配给未使用的属性。 然后，使用函数检索列表项模型的正确键。 只要您在更新项目时考虑tempId属性，只要列表保留在内存中，您就可以保持密钥相同。

虽然您可能并不总是关心乐观项目是否被删除并重新添加，但是当您在列表中使用输入或动画时动画时，它可以简化您的CSS。 当您拥有有状态列表项组件时，这也会有所帮助。

例：

let tempIds = 1; // 1 and up are truthy

// where ever you add the new item to your list
const newList = [...list, {...newItem, tempId: tempIds++}];

// get the right id
function getKey(instance) {
  if (instance.tempId) {
    return instance.tempId;
  } else {
    return instance.id;
  }
}

// in your list render function
<List>
  {list.map(model => (
    <Item
      key={getKey(model)}
      //other props go here
    />
  ))}
</List

您需要唯一，一致且可用的密钥。 您的数据库ID无法提供第三个要求，但您可以 - 使用本地“客户端ID”。 显然，您有责任保证其独特性和一致性。

您可以添加，编辑和删除评论。 它们每10秒通过GET拉动一次。

我们总是POST到一个资源，该资源在返回时会在您的案例ID中生成包含我们需要的数据的JSON响应。 延迟达到约100毫秒，这很好。

如果您设置的临时ID不等于数据库将要提供的临时ID，则一旦收到新数据，React将再次重新呈现，您将看到两个相同的项目，因为密钥不相同。

React.js：在做乐观创建时如何生成一个键？

问题描述

1楼

2楼

3楼