Компоненты не отображаются при динамическом создании с array.map в реакции

Question

Я учусь реагировать.Я хотел создать 8 идентичных элементов в контейнере.

Ниже приведен мой код

class Card extends React.Component{
    render(){
        return(
          <div className="card">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
          </div>
        )
    }
}

Компонент контейнера приведен ниже.

class Cardholder extends React.Component{
    render(){
        const cards = new Array(9).map((e,i)=> <Card key={i}/>);
        return(
            <div>
                {cards}
            </div>
        );
    }
}

export default Cardholder;

Оба компонентав том же файле.Компоненты не отображаются.Там нет ошибок.В консоли браузера отображается следующее сообщение:

[Log] [HMR] Ожидание сигнала обновления от WDS ...

[Info] [WDS] Включена замена горячего модуля.

Когда я даю массив как

new Array(9).fill(<Card/>) 

, он работает.Но есть ошибка «ключ», так как для элементов не задано значение ключа.

Answer 1

Для пустого массива он возвращает пустой массив, а не индексы.Я думаю, что это проблема.

arr.map((e,i) => i)

Таким образом, вы должны попробовать что-то вроде

var arr = new Array(9).fill(0)

И тогда это будет работать.

Так как для пустого массива карта также возвращает пустой массив, ничего не отображается.

Answer 2

new Array(9) //produce 9 undefined

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

new Array(9).fill(null).map((e,i)=> <Card key={i}/>);