缺少元素的“键”道具。(JS和TypeScript)

我使用下面的代码来编写reactJS和typescript。在执行命令时,我发现下面的错误

我还添加了import语句
导入’bootstrap/dist/css/bootstrap.min.css’;
在Index.tsx中

有没有办法解决这个问题

npm启动
client/src/Results.tsx
(32,21):元素缺少“键”道具。

文件如下“Results.tsx”

导入*作为“React”的React;
类结果扩展了React.Component<{},任何>{
构造器(道具:任何){
超级(道具);
此.state={
主题:[],
孤岛加载:false
};
}
componentDidMount(){
this.setState({isLoading:true});
取('http://localhost:8080/topics')
.then(response=>response.json())
.then(data=>this.setState({topics:data,isLoading:false}));
}
render(){
const{topics,isLoading}=this.state;
如果(孤岛加载){
返回<p>加载…</p>;
}
返回(
<div>
<h2>结果列表</h2>
{topics.map((topic:any)=>
<div className=“面板默认设置”>
<div className=“panel heading”键={topic.id}>{topic.name}</div>
<div className=“面板主体”键={topic.id}>{topic.description}</div>
</div>
)}
</div>
);
}
}
导出默认结果;

您正在渲染一个元素数组,因此React需要一个prop(1)来识别元素并优化内容

key={topic.id}添加到jsx:

返回(
<div>
<h2>结果列表</h2>
{topics.map((topic:any)=>
<div className=“panel panel default”键={topic.id}>
<div className=“面板标题”>{topic.name}</div>
<div className=“面板主体”>{topic.description}</div>
</div>
)}
</div>
);

发表评论