我使用下面的代码来编写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>;
);