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

【问题标题】：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 作为道具，因为它是未定义的。但实际上我不想将密钥作为道具传递。只是想通过钥匙。现在问题解决了。我不再收到该警告。

标签： reactjs typescript react-redux react-hooks jsx

【解决方案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={...} />

【讨论】：