Question

使用React.js非常有趣。

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

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

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

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

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

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

此时，评论会添加到评论列表中，但没有密钥/ ID，因此无法编辑或删除评论，直到下一次API调查期间列表更新为止。

我可以解决这个问题吗？

Answer 1

如果您需要密钥在更新中保持相同，则可以选择将临时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

Answer 2

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

Answer 3

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

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

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

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

3 个答案: