J'ai l'interface suivante:

interface ExamData {
  id: number;
  title: string;
  description: string;
  essay_questions: boolean;
}

Je me réfère au tableau dans l'état ci-dessous:

  const [exam, setExam] = useState<ExamData[]>([]);

Lorsque j'essaye de rendre un élément, j'obtiens l'erreur:

<h6>{exam.title}</h6>

// Error
Property 'title' does not exist on type 'ExamData[]'.  TS2339
0
Fred 17 mars 2021 à 04:55

1 réponse

Meilleure réponse

Voulez-vous rendre plusieurs examens ou un examen unique ?

Puisque vous utilisez un tableau, vous voulez probablement de nombreux examens, auquel cas vous devriez utiliser quelque chose comme:

{
  exam.map((item) => <h6>{item.title}</h6>)
}

Je recommande également fortement d'utiliser des noms de variables précis pour éviter ce genre de problèmes - c'est un tableau, pas un seul élément, alors appelez-le peut-être exams au lieu de exam:

const [exams, setExams] = useState<ExamData[]>([]);
{
  exams.map((exam) => <h6>{exam.title}</h6>)
}

Votre code d'origine ne fonctionne pas car la variable exam fait référence à un tableau , pas à quelque chose de type ExamData - donc il n'a pas de propriété title .

Si vous voulez vraiment n'avoir qu'un seul examen dans l'état, changez l'état en

const [exam, setExam] = useState<ExamData>();

Puis faire

<h6>{exam?.title}</h6>
1
CertainPerformance 17 mars 2021 à 02:03