Javascript 在react js中呈现2个组件

我在我的项目中遇到了一个问题，我使用了两个不同的组件，一个是卡片，第二个是图表，我显示了该组件上的API数据，但当我渲染两个组件时，它们将相互覆盖，我如何解决这个问题

render() {
    return (
        <div style={{ display: "flex" }}>
            {
                this.state.data.map((item, index) => {
                    return <div key={index} style={{ width: "300px" }}>
                        <Cards value={item} title={item.bikeId} time={item.timeStamp} />
                        <Speedometer speed={item.speed} />
                    </div>
                })
            }
        </div>        
    )
}

render（）{
返回(
{
this.state.data.map（（项，索引）=>{
返回
})
}
)
}

---

卡和速度表是两个不同的组件，它将根据API响应创建。通过覆盖，如果您的意思是组件相互重叠，这可能是CSS问题，请尝试在两个组件之间放置一个

或

---

尝试将宽度增加到100%并删除300px

解释彼此“覆盖”的含义。这看起来不错，但是你可以有只做一次展示的风格——或者宽度太小——需要更多的解释来回答这个问题。就像从哪里获取数据，从哪里正确地传递数据一样，似乎没有任何内容被覆盖。如果您使用的是redux工具，您应该能够检查您的组件，并检查它们是否实际呈现。我从API获取数据，并且两个组件传递不同的API对象。组件是根据我编写的for循环自动创建的。因此，当我为渲染添加两个组件时，它们都是相互重叠的。