Question

Q: Is it okay to have the same keys for different list items rendered within separate map functions in the same React component?

<>Situation: 如你在实例代码中所示,将指数作为<代码>key识别码的Im。两者都将从0、1、2、3开始。

(Both initialMessageData and messageData are dynamic, changing over time)

www.un.org/Depts/DGACM/index_spanish.htm 守则例:

  ...
  ...
  return (
    <ul>
      {initialMessageData.map((data, index) => (
        <ChatLog key={index} data={data} />
      ))}
      {messageData.map((data, index) => (
        <ChatLog key={index} data={data} />
      ))}
    </ul>
  );

If it is okay, why?
If it is not okay, why?

Answer 1

From React sdocs:

Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree.

而且:

Keys must be unique among siblings. However, it’s okay to use the same keys for JSX nodes in different arrays.

为了回答你的问题,如果是这样的话,那是因为清单项目来自两个不同的阵列:Here,是供进一步阅读的同docs的链接。

友情链接