React Component Function with Each child in a list should have a unique "key" prop.检查渲染方法

Question

好的。所以这里是交易。没有这个组件 - 我的项目一切都很好。与它一起时，它会指出此警告。

警告：列表中的每个 child 都应该有一个唯一的“键”道具。检查渲染方法

我目前只在我的项目中的一个地方使用它。如果我将其注释掉，问题就会消失。所以肯定有问题。

这是组件代码。只是一个简单的计时器。

https://pastebin.com/dj2jy7wi

它的问题以及我为什么在这里。这是因为我不明白为什么会出现这个错误。

为了方便起见，我将post放在我使用它的地方。所以你会看到，我没有遍历它。

<WaitTimer startDate={visitNext.ehrAppointment?.start_datetime_ltz.getTime()}/> 就是它了！

  return (
<Card className={className}>
  <div>
    <div className="font-bold text-xs">Next Patient:</div>
    {visitNext ?
      <div>
        <CardHeading>{visitNext.ehrPatient?.name}</CardHeading>
        <WaitTimer startDate={visitNext.ehrAppointment?.start_datetime_ltz.getTime()}/>
        <ul className="pl-5">
          <Field label="Reason for Visit" value={visitNext.ehrAppointment.reason} />
          <Field label="Gender" value={visitNext.ehrPatient?.gender} />
          <Field label="Language" value={visitNext.ehrPatient?.language} />
          <Field label="Translator" value={visitNeedTranslator} />
          <Field label="Preexisting Conditions" value={(visitNext.ehrPatient && visitNext.ehrPatient.conditions) ? visitNext.ehrPatient.conditions.join(',') : ''}/>
          <Field label="Current Medications" value={(visitNext.ehrPatient && visitNext.ehrPatient.medications) ? visitNext.ehrPatient.medications.join(',') : ''}/>
          {visitNext.ehrAppointment.references.length > 0 ? (
            <li>
              <label className="text-bold">Attached Files:</label>
              {visitNext.ehrAppointment.references.map((e, i) => (
                <a
                  key={i}
                  className="flex rounded-lg my-3 border border-link py-3 px-4 text-link text-xs items-center cursor-pointer"
                  href={"http://localhost:3000/" + e}
                  target="_blank"
                  rel="noreferrer"
                >
                  <span className="flex-grow underline">{e.replace(/^.*[\\/]/, '')}</span>
                  <Icon name="file_download" outline />
                </a>
              ))}
            </li>
          ) : (
            <Field label="Attached Files" value="None" />
          )}
        </ul>
        <div className="mt-5 text-center">
          <Button as="button" onClick={startVisit}>
            Start Visit
          </Button>
        </div>
      </div> :
      <LoadingSpinner/>
    }
  </div>
</Card>

);

上面这段代码是直接介绍index.tsx 这里。作为 NextPatientCard

 return (
<Layout>
  <div className="grid gap-4 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1" >
    <div>
      <NextPatientCard className="my-2" visitNext={visitNext}/>
      <InviteCard />
    </div>
    <div>
      <PatientQueueCard className="my-2" onDemandQueue={onDemandQueue} visitQueue={visitQueue} isNewVisit={isNewVisit} setIsNewVisit={setIsNewVisit}/>
      <ContentManagementCard className="my-2" contentAssigned={contentAssigned} contentAvailable={contentAvailable}/>
      <SurveyResultsCard className="my-2"/>
    </div>
    <div className="order-first lg:order-last">
      <AudioVideoCard />
    </div>
  </div>
</Layout>

);

我的问题如下。为什么我会收到此错误以及在这种情况下如何修复它？

我几乎什么都试过了。将键属性放在 div 的外面。使用 WaitTimerProps 接口等将数据传递到我的函数..

没有任何效果。最好和最好奇的部分是以下.. 正如你在我使用我的外部渲染上看到的 <WaitTimer startDate={visitNext.ehrAppointment?.start_datetime_ltz.getTime()}/>

我们还有另一个自定义组件。就在上车道

<CardHeading>{visitNext.ehrPatient?.name}</CardHeading>

如果它之前使用它并且没有任何错误（因此它正在向它传递数据）他们甚至在项目中处于同一位置。所以它是以某种方式制作的，没有这个警告，对吧？

代码如下：

export interface CardHeadingProps {
  children: React.ReactNode;
}
export const CardHeading = ({ children }: CardHeadingProps) => {
  return (
    <h1 className="text-2xl text-primary whitespace-pre-wrap">{children}</h1>
  );
};

真的很简单吧？

我已经将我的 WaitTimer 转换为这个类似的签名和道具界面。它甚至像以前一样工作。但是仍然......有这个警告:(

我不知道该怎么做，接下来试试。也许问题出在我的 WaitTimer

的渲染函数中

  return (
      <div className="font-bold text-light text-xs">
        <div>
          {textLabel} {timerComponents}
        </div>
      </div>
  );

我也试过把钥匙放在这些 div 上。但它一如既往地毫无意义。

它和 React 本身到底有什么问题？以及为什么我的组件只收到此警告！

谁能给我指出正确的方向，好吗？

Answer 1

在 React 中，如果您尝试创建一个组件列表，您必须为该列表的每个项目传递一个唯一的键。否则，这将通过一些警告消息，就像您现在收到的一样。我不确定你在里面做什么，但是标签里面的项目可能会出现问题。

你应该像这样传递一个 key 属性，

<Field key='unique_key1' label="Reason for Visit" value={visitNext.ehrAppointment.reason} />

在列表中的每个字段组件上，每个字段的键必须是唯一的，

Answer 2

我相信你的问题出在组件上

在此代码块中，您将使用 forEach 构建一个剩余时间对象，只需将键附加到第一个跨度即可解决警告。

  Object.keys(timeLeft).forEach((interval) => {
    // adding 00 to null values
    if (!timeLeft[interval]) {
      timerComponents.push(
          <span>{"00"}</span>
      );
    }
    // adding 0 to less than 10 values
     else if(timeLeft[interval] < 10){
      timerComponents.push(
          <span>{'0'}{timeLeft[interval]}</span>
      );
    }
     // adding other values
    else {
      timerComponents.push(
          <span>{timeLeft[interval]}</span>
      );
    }
    // adding colon
      timerComponents.push(
          <span>{":"}</span>
      );
  });

<span key={index}>{"00"}</span>

React Component Function with Each child in a list should have a unique "key" prop.检查渲染方法

React Component Function with Each child in a list should have a unique "key" prop. Check the render method

javascript

reactjs

typescript

warnings

react-props