反应警告：列表中的每个孩子都应该有一个唯一的“钥匙”道具，当钥匙被提供并且是唯一的

Question

我正在渲染 api 中的几个列表项：

{clientSurveys &&
        clientSurveys?.map(({ data }, index) => (
          <ListItem
            key={data?.SurveyID}
            component={Link}
            to={`survey/${data?.SurveyID}`}
            disablePadding
            sx={{ color: 'inherit' }}
          >
)}

如上所示，我提供了一个密钥（在本例中是调查的 ID）：

key={data?.SurveyID}

为什么我不断收到此警告？

Warning: Each child in a list should have a unique "key" prop.

Answer 1

为什么我不断收到此警告？

key中的可选链接( ? ) 表明data可能是undefined ，因此您的几个项目有可能获得具有undefined值的相同键。

key={data?.SurveyID} // it may end up with "undefined" value

当data undefined时，您必须保护这种情况。

还值得一提的是，在key中使用可选链接是一种反模式，因为key应该是 static 并且是唯一的。 data?.SurveyID还表明它可能会随时间变化。