Donc je suis nouveau pour réacjs et javascript et je suis coincé sur un problème. J'ai une application, construite de composants fonctionnels et ce que j'essaie de faire est de demander à un dB (où le schéma est de 2 colonnes, d'identification et de contenu) d'un composant, puis passez le résultat de cette requête (qui arrive OnCliquez sur CODE>, voir ci-dessous) à un autre composant fromage. Ce que j'ai jusqu'à présent, c'est ceci:
Bagogue code> est la liste des boutons . P> const BooksList = ({books, getBooksList, getBookContent}) => {
// *Other funcs*
return (
<React.Fragment>
<div>{books.map(book => {
return (
<div key={book.content}>
<button onClick={() => getBookContent()}>{book.content}</button>
</div>
)
})}</div>
</React.Fragment>
)
3 Réponses :
Vous devez utiliser puis appelez-le dans votre composant comme celui-ci: littéraux de modèle au lieu de
Vous devez utiliser des backticks: pour l'ID, vous pouvez le faire de cette façon: p> <div key={book.id}>
<button onClick={() => getBookContent(book.id)}>{book.content}</button>
</div>
En réalité, vous devez utiliser JavaScript Currying code> Et vous devez lire sur chaîne de modèle code> . First First Vos getbookContent CODE> Fonction: <>
<div>
{books.map(({ content, id }) => (
<div key={content}>
<button
onClick={getBookContent(id)}
>
{content}
</button>
</div>
)
)}
</div>
</>
Hey mec, c'est une bonne réponse. J'ai beaucoup appris de ça. Je ne sais pas pourquoi ou quelle est la différence, mais je devais mettre const getbookcontent = useCallback (id => async () => { comme const getbookcontent = usenc (id) = > { et cela a fonctionné parfait. acclamer l'homme!
@Intrg, vous êtes le bienvenu, l'un des avantages est une meilleure lisibilité. Lorsque vous créez une fonction Currying En fait, vous créez une fonction qui renvoie une autre fonction, avec votre version, c'est la même chose que moi, mais dans le niveau profond de l'enfant, vous créez une autre fonction à l'intérieur. Le onclick , vous pouvez collecter entier la fonction dans le niveau supérieur et rendre vos autres codes beaucoup plus faciles à lire. Pour plus d'informations, lisez [ce lien] (is.gd/edjjfx): ** Le principal avantage du Currying est lorsque vous devez utiliser le même appel avec certains des mêmes paramètres. **
Où trouvez-vous l'identifiant?
C'est en fait une partie de la question. Je veux obtenir l'article à ID et imprimer son contenu.
Je pense que vous devriez utiliser
getbookContent (book.id) dansBrochliste ComposantCher @Intrg, faire l'une des réponses vous aidez?
Ils semblent être utiles. Je vais mettre à jour en conséquence alors que je vais les traverser maintenant.
Si vous -1, laissez-moi savoir pourquoi afin que je puisse mettre à jour et / ou généraliser