reactjs - 如何使用地图功能向孩子添加“唯一键道具”

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>
    )
}

和我得到的控制台错误：

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

在我看来，每个孩子都有一个唯一的钥匙，我错过了什么？

标签： reactjskeyjsxarray.prototype.map

Answer 1

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

您必须使用完整的语法：

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

      ...

    </React.Fragment>
  )
})}