如果键是相同的，那么响应忽略作为更新元素的数组缓冲区的道具吗？

Question

我想知道如何反应决定重新呈现某些元素。我有一个应用程序，然后用户切换标签，我更新一个<AssetContainer>。有时，该容器将包含一个具有与密钥相同的asset的document_id。我注意到，当我创建资产时，我的效果会将缩略图URL设置为blob罚款。我切换选项卡，用相同的文件创建一个资产，它会产生另一个新的blob。然后，当我切换回第一个选项卡时，它将不会重新呈现。尽管在一个新的asset.thumbnail.image中传递了它，但它将它视为相同的。我应该指出，asset.thumbnail.image是一个数组缓冲区。这会使我们在寻找更新时无视价值吗？

我有这样的代码：

<AssetContainer>
{assets.map((asset) => (
      <Asset
        key={asset.document_id}
        thumbnail={asset.thumbnail!.image!}
        thumbnailFormat={asset.thumbnail!.format!}
        hasClaim={!!asset.provenance}
        errors={asset.errors}
        size="80px"
      />
    )
)}
</AssetContainer>

在<Asset>中，我使用<AssetView thumbnailUrl={thumbnailUrl} size={size}></AssetView>具有以下效果和代码，其中定义为：

// The effect in Asset
useEffect(() => {
  let blobUrl;
  if (thumbnail) {
    const imgData = Array.isArray(thumbnail)
      ? thumbnail
      : new Uint8Array(Object.values(thumbnail));
    const blob = new Blob([imgData], { type: thumbnailFormat });
    blobUrl = URL.createObjectURL(blob);
    // this is what stops firing every time i switch tabs which should re-render the elements based on new data in the tab
    console.log('setting thumbnail url', blobUrl);
    setThumbnailUrl(blobUrl);
  }
  return () => {
    if (blobUrl) {
      URL.revokeObjectURL(blobUrl);
    }
  };
}, []);

// The AssetView definition for the tag invocation above
const AssetView = styled.div`
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-shrink: 0;
  width: ${(props) => props.size};
  height: ${(props) => props.size};
  margin-right: 4px;
  margin-bottom: 4px;
  border-radius: 2px;
  background-color: #434646;
  background-image: ${(props) =>
    props.thumbnailUrl ? `url("${props.thumbnailUrl}")` : 'none'};
  background-size: contain;
  background-position: center;
`;

简短的版本是:每次我切换选项卡时，<Asset>都会像预期的那样呈现。每次在console.log回来之前，我都会看到一个<AssetView>的火焰。但是，当数组缓冲区支柱更新时，当useEffect of <Asset>与以前相同时，key不会触发。不知道为什么。

更新，为什么做缩略图的效果不是答案，，这不是问题，因为事情更新很好，因为更高级别的组件重新安装。如果我这样做，每次我切换标签，它将重新运行使用效果，并生成一个新的blob URL，这不是我想要的。其行为是在表A中生成Blob-1，在Tab B中生成Blob-2。当我回到表A的时候，我想要布洛布-1，但仍然有布洛布-2。

我相信问题是，key对于两个选项卡都是相同的(我将修复这两个选项卡)，但我不确定需要达到多高(如果可能的话)才能对忽略key做出反应。如果只有key导致缓存，那么它甚至不应该生成Blob-2。

Answer 1

thumbnail不应该包含在效果依赖数组中吗？

useEffect(() => {
    // ...
}, [props.thumbnail]);

否则，该效果将只运行一次有一个空数组