web-dev-qa-db-fra.com

Accessoire "clé" manquant pour l'élément. (ReactJS et TypeScript)

J'utilise ci-dessous le code pour reactJS et TypeScript. Lors de l'exécution des commandes, j'obtiens une erreur ci-dessous.

J'ai également ajouté la déclaration d'importation import 'bootstrap/dist/css/bootstrap.min.css'; dans Index.tsx.

Existe-t-il un moyen de résoudre ce problème?

npm start

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

Le fichier est comme ci-dessous "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;
node.jsreactjstypescript
13
Abhinav1singhal

Vous effectuez le rendu d'un tableau d'éléments, donc React a besoin d'un key prop ( 1 ) pour identifier les éléments et optimiser les choses.

Ajouter key={topic.id} à votre 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>
);
28
kLabz