0
votes

Obtenir les détails d'un seul élément à partir d'une liste json à l'aide d'un nouveau composant de détails dans React

Je suis nouveau pour réagir et je suis confronté à un problème pour obtenir des détails sur l'article lorsqu'un élément est cliqué sur réagir à partir d'un autre composant de détails. J'ai un menucomponent.js qui est censé appeler la dashdetailcomponent.js lorsque l'une des cartes est cliquée, mais je reçois une erreur dans le composant de mon plat de détail lorsque je fais

import  React, { Component } from 'react';
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from 
"reactstrap";

class DishDetail extends Component{
   constructor(props) {
     super(props);
   }

 render() {
     const DishDetail = this.props( (selectedDish)=> {
         if (selectedDish != null) {
             return (
                 <Card>
                     <CardImg width="100%" src={selectedDish.image} alt={selectedDish.name} />
                     <CardBody>
                         <CardTitle>{selectedDish.name}</CardTitle>
                         <CardText>{selectedDish.description}</CardText>
                     </CardBody>
                 </Card>
             )
         } else {
             return (
                 <div></div>
             );
         }
     });

     return (
         <div className="container">
             <div className="row">
                 {DishDetail}
             </div>
         </div>
     )
   }
 }

 export default DishDetail;

javascript reactjs

0 commentaires

3 Réponses :

0
votes

ceci.props code> n'est pas une fonction, c'est un objet. Essayez d'écrire votre dashdetail code> comme ça.

p>



import  React, { Component } from 'react';
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from 
"reactstrap";

class DishDetail extends Component{
   constructor(props) {
     super(props);
   }

 render() {
     const { selectedDish } = this.props;
     const DishDetail = () => {
        if (selectedDish) {
           return (
             <Card>
                 <CardImg width="100%" src={selectedDish.image} alt={selectedDish.name} />
                 <CardBody>
                     <CardTitle>{selectedDish.name}</CardTitle>
                     <CardText>{selectedDish.description}</CardText>
                 </CardBody>
             </Card>
           )
        }
        return (
           <div />
        );
     
    }
     

     return (
         <div className="container">
             <div className="row">
                 {DishDetail}
             </div>
         </div>
     )
   }
 }

 export default DishDetail;

1 commentaires

Merci pour la réponse, mais rien ne s'affiche lorsque je clique sur l'une des cartes, lorsque je fais console.log (selectedDish) dans const DishDetail, aucun résultat ne s'affiche, mais lorsque je le fais avant DishDetail après avoir attribué this.props à selectedDish I vois la valeur

0
votes

import  React, { Component } from 'react';
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from 
"reactstrap";

const DishDetail = ({ selectedDish }) => {
    return (
        <div className="container">
            <div className="row">
                { selectedDish &&
                    <Card>
                        <CardImg width="100%" src={selectedDish.image} alt={selectedDish.name} />
                        <CardBody>
                            <CardTitle>{selectedDish.name}</CardTitle>
                            <CardText>{selectedDish.description}</CardText>
                        </CardBody>
                    </Card>
                }
            </div>
        </div>
    )
};

export default DishDetail;
The purpose of this component is to display information, so the functional component is a better choice here (instead of the class), but there is no restriction on this, just a recommendation. Try to walk through the code and understand it, do not worry to ask questions if there are any..

3 commentaires

Je n'ai pas vérifié vos autres composants, mais je vois qu'ils peuvent être légèrement améliorés et simplifiés.

Je voudrais juste connaître la signification de 'selectedDish &&'

&& est un opérateur logique AND, retourne vrai si les deux opérandes sont vrais. Dans ce cas, si selectedDish n'est pas nul (vrai) - rend le composant de l'autre côté de &&, si selectedDish est nul (faux), l'autre côté n'est même pas vérifié pour vrai / faux et le composant n'est pas rendu. En termes simples - si selectedDish = null, ne rend rien sur le côté droit de &&, sinon nul rend ce qui se trouve sur le côté droit du &&. Je ne suis pas doué pour les explications, xD J'espère que ça aide

1
votes

Cela devrait fonctionner:

import React, { Component } from 'react';
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from 
'reactstrap';

class DishDetail extends Component{
    constructor(props) {
      super(props);
    }

    renderDish(dish) {
        if (dish != null)
            return(
                <Card>
                    <CardImg top src={dish.image} alt={dish.name} />
                    <CardBody>
                      <CardTitle>{dish.name}</CardTitle>
                      <CardText>{dish.description}</CardText>
                    </CardBody>
                </Card>
            );
        else
            return(
                <div></div>
            );
    }

    render() {

        return (
            <div className="container">
                <div className="row">
                    {this.renderDish(this.props.selectedDish)}
                </div>
            </div>
        )

    }
}

export default DishDetail;

0 commentaires