为什么我会收到此警告：列表中的每个孩子都应该有一个唯一的“关键”道具

Question

我将索引作为唯一键传递，但我仍然收到此警告：

警告：列表中的每个孩子都应该有一个唯一的“key”属性。

查看SectionPackages的渲染方法

谁能指导我可能是什么问题？

const SectionPackages = props => {

  const listingPackages =
    publicData && publicData.packages && publicData.packages.length
      ? [defaultPackage, ...publicData.packages]
      : [];

  useEffect(() => {
    listingPackages.map((l, index) => {
      hidden[index] = true;
      setHidden([...hidden]);
    });
  }, []);

  return (
    <div className={listingPackages.length ? rootClassName : css.noPackages}>
      {listingPackages.length > 0 && (
        <h2 className={css.packagesMainTitle}>
          <FormattedMessage id="SectionPackages.title" />
        </h2>
      )}

      {listingPackages.map((listingPackage, index) => {
        const moneyPrice = new Money(
          listingPackage.price.amount * 100,
          listingPackage.price.currency
        );

        return (
          <a onClick={e => handleBtnClick(e, index)} key={index}>
            <div
              key={index}
              className={
                selectedPackage === index && selectedPackage !== null
                  ? classNames(css.packagesContainer, css.packagesSelectedContainer)
                  : css.packagesContainer
              }
            >

              <div className={css.packagesDescriptionHolder}>
                {listingPackage.description != null && (
                  <p
                    className={
                      hidden[index] === true
                        ? classNames(css.packagesDescriptionHidden, 'packagesDescription')
                        : classNames(css.packagesDescriptionShown, 'packagesDescription')
                    }
                  >
                    {listingPackage.description}
                  </p>
                )}
                {elHeight[index] && elHeight[index].index === index && elHeight[index].height > 40 && (
                  <p
                    className={css.packagesDescriptionMore}
                    onClick={e => showHideDescription(e, index)}
                  >
                    {hidden[index] === true ? (
                      <FormattedMessage id="SectionPackages.showMore" />
                    ) : (
                      <FormattedMessage id="SectionPackages.showLess" />
                    )}
                  </p>
                )}
              </div>
            </div>
          </a>
        );
      })}
    </div>
  );
};

Answer 1

当你使用 map 或任何其他循环函数时，你需要为你在 react 中生成的每个元素分配一个唯一的键。

在您的情况下，您将索引分配给同一循环中的“a”标签和“div”。

您可以通过添加某种前缀来使它们独一无二，例如：

     <a onClick={e => handleBtnClick(e, index)} key={`a_${index}`}>
        <div
          key={`div_${index}`}

这样，a 的键与 div 的键不同。

作为替代解决方案，您可以从 div 中删除“key”并将其保留在“a”标签上。

注意事项 我想澄清一下，因为它的工作原理似乎有些混乱。

在这种情况下，相同的键被用于“a”和“div”，它们都在相同的循环中.

在这种情况下 "a"，您需要将键分配给 map 函数返回的根元素。

React 将使用 key 将之前的虚拟 dom 与当前的虚拟 dom 进行比较并执行合并。这与“识别”元素中的元素无关。

此外，不建议使用“index”作为键，因为索引可能会在下一次传递时出现在不同的项目上。

这是来自 react 文档的引用：

如果项目的顺序可能发生变化，我们不建议对键使用索引。这会对性能产生负面影响，并可能导致组件状态出现问题。

https://reactjs.org/docs/lists-and-keys.html

同时检查Index As Key Anti-Pattern