反应：列表中的每个孩子都应该有一个唯一的“关键”道具答案

【问题标题】：React: Each child in a list should have a unique "key" prop反应：列表中的每个孩子都应该有一个唯一的“关键”道具
【发布时间】：2021-02-19 15:07:04
【问题描述】：

即使我为每个孩子分配了一个密钥，我仍然不断收到此错误消息。

function BertScoreSentence({sentence}: BertScoreSentenceProps) {

let content: JSX.Element[] = []
sentence.words.forEach((word) => {
    content.push(
        <>
            <span key={word.id}>
                {word.text}
                {bertscores && wordId >= 0 && word.id === bertscores[wordId][3] && isSummaryWord !== visualizeSummary && (
                    <>(s: {bertscores[wordId][4].toFixed(2)})</>
                )}
            </span>
            &nbsp;
        </>
    )
})

return (
    <p id={prefix + "" + sentence.id} className={className}>
        {content}
    </p>
)

}

我猜使用或使用 span 有什么问题？

任何帮助表示赞赏:)

【问题讨论】：

标签： reactjs

【解决方案1】：

<React.Fragment key={word.id}>
                {word.text}
                {bertscores && wordId >= 0 && word.id === bertscores[wordId][3] && isSummaryWord !== visualizeSummary && (
                    <>(s: {bertscores[wordId][4].toFixed(2)})</>
                )}
            &nbsp;
</React.Fragment>

如果你热衷于片段

https://reactjs.org/docs/fragments.html#keyed-fragments

【讨论】：

【解决方案2】：

key 必须在返回的 top-most React 元素中 - 如果你将它包装在一个片段中，React 将无法分辨。

我会将&nbsp; 包装在<span> 中并将其推送到content：

const content = sentence.words.flatMap((word) => [
    <span key={word.id}>
        {word.text}
        {bertscores && wordId >= 0 && word.id === bertscores[wordId][3] && isSummaryWord !== visualizeSummary && (
            <>(s: {bertscores[wordId][4].toFixed(2)})</>
        )}
    </span>,
    <span key={word.id + 'space'}>&nbsp;</span>
]);

【讨论】：