Node.js   发布时间:2022-04-24  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了node.js – 缺少元素的“关键”道具. (ReactJS和TypeScript)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在下面的代码中使用了reactJS和typescript.在执行命令时,我得到以下错误.

我还添加了import语句
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';
 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;

解决方法

您正在渲染一个元素数组,因此React需要一个关键支柱( 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>
);

大佬总结

以上是大佬教程为你收集整理的node.js – 缺少元素的“关键”道具. (ReactJS和TypeScript)全部内容,希望文章能够帮你解决node.js – 缺少元素的“关键”道具. (ReactJS和TypeScript)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。