Je lise un tableau d'un fichier appelé jokesdata.js comme ci-dessous dans le fichier App.js. Si j'ajoute le retour ({jokecomponents}) dans Render () {}, j'obtiens l'erreur ci-dessous. N'avons-nous pas besoin de rendu ()
3 Réponses :
Essayez ci-dessous le code. P> import React from 'react';
import './App.css';
import Joke from './components/Joke.js';
import jokesData from './data/jokesData.js'
function App() {
const jokeComponents = jokesData.map((joke) => <Joke key={joke.id} question={joke.question} punchLine = {joke.punchLine} />)
return (
<div>
{jokeComponents}
</div>
);
}
export default App
Retournez votre JSX. Vous n'avez besoin d'aucune fonction de rendu dans des composants fonctionnels
La fonction de rendu est uniquement applicable aux composants de la classe. Vous n'avez pas besoin de l'écrire dans les composants fonctionnels.
p>
import React from 'react';
import './App.css';
import Joke from './components/Joke.js';
import jokesData from './data/jokesData.js'
function App() {
const jokeComponents = jokesData.map((joke) => <Joke key={joke.id} question={joke.question} punchLine = {joke.punchLine} />)
return (
<div>
{jokeComponents}
</div>
)
}
export default App
C'est un composant fonctionnel droit, donc pas besoin de
rendu () {...} fonction. Il suffit de déplacer leretour (...) à l'extérieur et supprimezrendu fonction.