Node.js “失踪”；“关键”；元素的道具。（JS和TypeScript）

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

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

有没有办法解决这个问题

npm start

client/src/Results.tsx
(32,21): Missing "key" prop for element.

文件如下“Results.tsx”

import*as React from'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；
如果（孤岛加载）{
返回加载…
；
}
返回(
成绩表
{topics.map（（topic:any）=>
{topic.name}
{topic.description}
)}
);
}
}
导出默认结果；

您正在渲染一个元素数组，因此React需要一个

键

prop（）来识别元素并优化内容

将

key={topic.id}

添加到jsx：

return (
    <div>
        <h2>Results List</h2>
        {topics.map((topic: any) =>
            <div className="panel panel-default" key={topic.id}>
                <div className="panel-heading">{topic.name}</div>
                <div className="panel-body">{topic.description}</div>
            </div>
        )}
    </div>
);

返回(
成绩表
{topics.map（（topic:any）=>
{topic.name}
{topic.description}
)}
);

这对我很有帮助

不得使用React特殊道具

---

在我的例子中，

（react 16.13.1）

键不仅需要在最外面的元件上，而且也需要在内部元件上<代码>{topic.name}应该是

{topic.name}

。就像在问题中一样。这听起来不对，除非你在数组中呈现内部元素。也许你是对的，我是个新手。可能还有其他因素在起作用，将key设置为child元素只是多余的。呃，这是在div上，但是如果您必须在多个自定义组件上放置key，那么TS会抱怨key不是属性，并且您有鸡和蛋的情况

return (
    <div>
        <h2>Results List</h2>
        {topics.map((topic: any) =>
            <div className="panel panel-default" key={topic.id}>
                <div className="panel-heading">{topic.name}</div>
                <div className="panel-body">{topic.description}</div>
            </div>
        )}
    </div>
);