gpt4 book ai didi

javascript - 带有键的组件中缺少唯一的 "key" Prop

转载 作者:行者123 更新时间:2023-11-30 14:59:25 27 4
gpt4 key购买 nike

我在控制台中收到以下错误

warning.js:33 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `SectionList`. See for more information.
in div (created by SectionList)
in SectionList (created by Sections)
in div (created by Sections)
in div (created by Sections)
in Sections (created by SeatingChart)
in div (created by SeatingChart)
in div (created by SeatingChart)
in div (created by SeatingChart)
in div (created by SeatingChart)
in SeatingChart (created by Connect(SeatingChart))

我有一个SeatingChart组件

render() {
return (
<div className="container-fluid">
<div className="row">
<div className="col-md-12">
<div className="col-md-4 offset-md-1 align-top" style={SeatingChartStyle.sectionBuilder}>
<Sections teamName={this.props.seatingChart.teamName} sections={this.props.seatingChart.sections} saveSection={this.saveSection}/>
</div>
</div>
</div>
</div>
);
}

渲染 Sections 组件

renderSectionList(){
if(this.props.teamName){
return (
<div>
<br />
<h3>Sections</h3>
<SectionList sections={this.props.sections} saveSection={this.props.saveSection} />
</div>
);
}
}

render() {
return (
<div>
{this.renderSectionList()}
</div>
);
}

呈现 SectionsList 组件

previewSection(item, index){
return (
<div>
<SectionItem key={index} section={item} saveSection={this.props.saveSection}/>
</div>
);
}

sectionListMap() {
if(this.props.sections) {
let sections = Object.values(this.props.sections);
return (
sections.map(this.previewSection)
);
}
}

render() {
return (
<div className="col-md-9">
<div id="accordion" role="tablist" aria-multiselectable="true">
<SectionItem key={-1} section={sectionObj} saveSection={this.props.saveSection} />
{this.sectionListMap()}
</div>
</div>
);
}

我在哪里遗漏了我的 key ,每个 SectionItem 都有一个 key Prop 。

最佳答案

warning.js:33 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `SectionList`. See for more information.
in **div** (created by SectionList)

您正在呈现一个 div 列表(每个包含一个 SectionItem)并且您的 div 没有键。您可以通过将 key Prop 移动到您的 div 来修复错误,即

previewSection(item, index){
return (
<div key={index}>
<SectionItem section={item} saveSection={this.props.saveSection}/>
</div>
);
}

在这种情况下,SectionItem 不需要键,因为每个 div 只有 1 个 SectionItem,而不是列表。

或者,如果您不需要 div,则将其删除并将键保留在 SectionItem 上也可以修复错误

previewSection(item, index){
return (
<SectionItem key={index} section={item} saveSection={this.props.saveSection}/>
);
}

关于javascript - 带有键的组件中缺少唯一的 "key" Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46760823/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com