如何将密钥传递给反应组件

Posted 2023-02-21

【中文标题】如何将密钥传递给反应组件

【英文标题】：How to pass key to react component

【发布时间】：2021-11-15 22:15:47

【问题描述】：

我知道这是一个非常基本的问题，即使是初学者也可以做到。但不知何故我收到了这个错误：

index.js:1 警告：列表中的每个孩子都应该有一个唯一的“键” 道具。

查看FilterProducts的渲染方法。

这是我的代码

const filterList = filterBy.map((f, i) => 
    const key = Object.keys(f);
    return (
      <div key=i className="filter">
        <h4 className="filter__header">key</h4>
        f[key].map((val) => 
          return (
            <CheckBoxInput
              changeVal=(e) => changeValHandler(e, key)
              value=val.toLowerCase()
              label=val
            />
          );
        )
      </div>
    );
  );

我正在渲染 2 个列表，我提供了第一个列表的密钥，而第二个列表我不知道如何传递密钥。它是一个组件，如果我将密钥传递给该组件，它会抱怨密钥不能作为道具传递。 请在这里给我一些帮助

【问题讨论】：

键应该是唯一的东西，可以识别每个映射的元素。在没有它的情况下，您始终可以使用当前数组索引，就像使用 <div key=i ... 一样。是什么阻止您应用完全相同的解决方案？

CheckBoxInput 应该有一个key="..."。除非两个输入具有相同的 val

，否则您可能可以使用 val 作为您的密钥

这很奇怪。我在这里提问之前就这样做了。那时我收到警告说我不能使用 key 作为道具，因为它是未定义的。但实际上我不想将密钥作为道具传递。只是想通过钥匙。现在问题解决了。我不再收到该警告。

【参考方案1】：

这样传递：

 f[key].map((val,i) => 
          return (
         <div key=i>
            <CheckBoxInput
              changeVal=(e) => changeValHandler(e, key)
              value=val.toLowerCase()
              label=val
            />
         </div>

【参考方案2】：

我认为您的代码在这一行不正确：

f[key].map((val) => 

您已经在此处检索了f 的密钥：

 const key = Object.keys(f);

所以你的代码实际上应该是这样的：

const filterList = filterBy.map((f, i) => 
    const keys = Object.keys(f);
    return (
      <div key=i className="filter">
        <h4 className="filter__header">keys</h4>
        keys.map((val) => 
          return (
            <CheckBoxInput
              key=val // then just use the f property key as the key (if unique)
              changeVal=(e) => changeValHandler(e, key)
              value=val.toLowerCase()
              label=val
            />
          );
        )
      </div>
    );
  );

然后只需使用 f 属性键作为第二个组件循环的键（如果唯一）。

---

也不确定你想在这一行显示什么

<h4 className="filter__header">keys</h4>

但到目前为止，代码已经编写完成，这将显示一个键数组。

【讨论】：

谢谢。我不再收到关键错误。嗯你是对的。那是一个错误。我需要访问该键数组的索引 0。

【参考方案3】：

你确实做对了。但是您的代码中有两个循环，每个循环都需要将循环元素标记为key 属性。只要该循环的密钥是唯一的，就可以了。

  <CheckBoxInput key=... />