在反应中使用 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] Waiting for update signal from WDS...

[Info] [WDS] Hot Module Replacement enabled.

当我给数组作为

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)

然后就可以了。

因为空数组映射也返回空数组，所以没有渲染。

在反应中使用 array.map 动态创建时未呈现的组件

Components not rendered when created dynamically with array.map in react

javascript

reactjs

babeljs

webpack-dev-server