如何使用 map 函数将 "unique key prop" 添加到 child

Question

我看到其他人问过与此类似的问题，我已经尝试实施他们收到的答案。但我仍然收到控制台错误。我的意思是代码按预期工作我只是讨厌出现控制台错误。

这是我的代码

const Accordion = () => {
    const [clicked, setClicked] = useState(false);

    const toggle = index => {
        if (clicked === index) {
            //if clicked question is already active, then close it
            return setClicked(null);
        }

        setClicked(index);
    };

    return (
        <IconContext.Provider value={{ color: '#441d0c', size: '25px' }}>
            <AccordionContainer>
                <FaqContainer>
                    {FaqData.map((item, index) => {
                        return (
                            <>
                                <QuestionWrapper onClick={() => toggle(index)} key={index}>
                                    <h2>{item.question}</h2>
                                    <span>{clicked === index ? <FiMinus /> : <FiPlus />}</span>
                                </QuestionWrapper>
                                {clicked === index ? (
                                    <AnswerDropdown>
                                        <p>{item.answer}</p>
                                    </AnswerDropdown>
                                ) : null}
                            </>
                        )
                    })}
                </FaqContainer>
            </AccordionContainer>
        </IconContext.Provider>
    )
}

我得到的控制台错误：

警告：列表中的每个 child 都应该有一个唯一的“关键”属性。

对我来说，看起来每个 child 都有一个唯一的密钥，我错过了什么？

Answer 1

您正在使用不能有键的 React Fragment 短语法。参见：https://reactjs.org/docs/fragments.html#short-syntax

您必须使用完整的语法：

{FaqData.map((item, index) => {
  return (
    <React.Fragment key={index}>

      ...

    </React.Fragment>
  )
})}

Answer 2

密钥应设置在地图的根对象中。为了修复警告，您可以用 div 替换反应片段 (<>) 并像这样设置键：

{FaqData.map((item, index) => {
    return (
        <div key={index}>
            <QuestionWrapper onClick={() => toggle(index)}>
                <h2>{item.question}</h2>
                <span>{clicked === index ? <FiMinus /> : <FiPlus />}</span>
            </QuestionWrapper>
            {clicked === index ? (
                <AnswerDropdown>
                    <p>{item.answer}</p>
                </AnswerDropdown>
            ) : null}
        </div>
    )
})}

如何使用 map 函数将 "unique key prop" 添加到 child

How to add "unique key prop" to child using map function

reactjs

key

jsx

array.prototype.map