缺少元素的“关键”道具。 （ReactJS 和 TypeScript）

Posted 2023-02-22

【中文标题】缺少元素的“关键”道具。 （ReactJS 和 TypeScript）

【英文标题】：Missing "key" prop for element. (ReactJS and TypeScript)

【发布时间】：2018-06-24 06:18:20

【问题描述】：

我正在为 reactJS 和 typescript 使用下面的代码。执行命令时出现以下错误。

我还添加了导入语句 导入'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';
 class Results extends React.Component<, any> 

constructor(props: any) 
    super(props);

    this.state = 
        topics: [],
        isLoading: false
    ;


componentDidMount() 
    this.setState(isLoading: true);

    fetch('http://localhost:8080/topics')
        .then(response => response.json())
        .then(data => this.setState(topics: data, isLoading: false));


render() 
    const topics, isLoading = this.state;

    if (isLoading) 
        return <p>Loading...</p>;
    

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



export default Results;

【参考方案1】：

您正在渲染一个元素数组，因此 React 需要一个 key 属性 (1) 来识别元素并优化事物。

将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>
);

【讨论】：

在我的情况下，(react 16.13.1) 键不仅需要在最外层元素上，而且在内部元素上也是如此。 <div className="panel-heading">topic.name</div> 应该是 <div className="panel-heading" key=topic.id>topic.name</div>。如问题所示。

这听起来不对，除非你在数组中渲染内部元素。

也许你是对的，我是新来的反应。也许还有别的东西在起作用，给子元素设置键只是多余的。

嗯，这是在一个 div 上，但是如果你必须在多个自定义组件上放置键，那么 TS 会抱怨键不是属性，而且你有鸡和蛋的情况

【参考方案2】：

这对我有帮助

不应访问 React 特殊道具 https://deepscan.io/docs/rules/react-bad-special-props