У каждого ребенка должно быть предупреждение

Question

Почему я получаю это предупреждение: Each child in a list should have a unique "key" prop., когда я фактически добавляю ключ в функцию карты?

const fieldsArr =
        effectsTextArr.map((effectsText, i) => {
                const style = effectsText.length === 1 ? fieldStyle1Icon : fieldStyle2Icons
                return (
                    <div style={style} key={i} onClick={() => playerStateContext.handleClickOnRelic(effectsArr[i], i)}>
                        {playerState.relics[i] ? effectsText : <Shiny/>}
                    </div>
                )
            }
        )

Исходный массив:

const effectsTextArr = [
        [<Jewel/>],
        [<Jewel/>],
        [<Coin/>, <div style={overLapStyle}><Weapon/></div>],
        [<Weapon/>],
        [<Explore/>, <div style={overLapStyle}><Text/></div>],
        [<Coin/>, <div style={overLapStyle}><Text/></div>],
        [<Coin/>],
        [<Explore/>],
        [<Draw1Card/>]
    ]

Могу ли я добавить ключи к элементам исходного массива тоже? Это неправильно использовать элементы JSX? Я использую их для хранения значков, которые я использую в разных местах моего приложения.

Answer 1

effectsText - это массив элементов JSX, для которого все еще требуется присвоить ему уникальный ключ.

{playerState.relics[i] ? 
     effectsText :  // here an array is passed and every elem requires a key
     <Shiny />
}

Таким образом, вместо прямой передачи его в качестве переменной, вы можете отобразить его и назначить ключ:

{effectsText.map((nested) => (
   <React.Fragment key={someUniqId}>{nested}</React.Fragment>
)}