在react

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;

两个组件都在同一文件中。组件未渲染。没有错误。浏览器控制台中显示的消息如下。

  

[日志] [HMR]等待来自WDS的更新信号...

     

[信息] [WDS]热模块更换已启用。

当我给数组为

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

有效。但是由于没有为元素指定键值，因此出现“键”错误。

Answer 1

new Array(9) //produce 9 undefined

仅对已分配值的数组索引调用回调

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

Answer 2

对于空数组，它将返回一个空数组而不是索引。我认为这是问题所在。

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

所以您应该尝试

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

然后它将起作用。

由于空数组映射也返回了空数组，因此未呈现任何内容。