"Impossible de lire la propriété 'carte' de non défini" ReactJS et tableau Lodash

Question

Je suis en train de rendre un tableau dans le JSX ci-dessous, en utilisant le ci-dessous; Je peux restituer les tableaux, mais il répète la fonction de rendu pour chaque tableau. Je veux seulement qu'il produise celui avec un id égal à 1. En essayant d'implémenter Lodash _.find je peux rendre le tableau dans la console en utilisant ceci; Ce qui suit est ma tentative d'implémenter le Lodash dans la méthode de rendu mais quand je l'exécute, j'obtiens l'erreur suivante;

Uncaught TypeError: ne peut pas lire la propriété 'carte' undefined

Voici le code dans le composant

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import $ from "jquery"; 
import lodash from "lodash"; 
import api from "../api.js";  

export default class EventRequest extends React.Component { 
constructor(props) { 
    super(props); 

    this.state = {event: []}; 
} 

componentDidMount() { 
    this.EventGroup(); 
} 
EventGroup() { 

    return $.getJSON(api.eventRequest).then((data) => { 
    console.log(data); 
    this.setState({ event: data.results }); 
    }); 
} 

render() { 
    const events = _.find(this.state.event, ['id', 1 ]).map((item, i) => { 
    return <div> 
    <div className="center-cards margin-top margin-bottom test-cardSecond"> 
     <div className="text-center margin-top"> 
     <h1 className="card-heading">Scottish Conference 2017</h1> 
     <div className="card-sub"> 
      <div>{item.description}</div><br /> 
     </div> 
     </div> 
    </div> 
     <div className="belowBoxTestSecond"> 
     <h1 className="bodyHeading">Example</h1> 
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <br /><br /> 
     Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. <br /> 
     Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <br /> 
     Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? <br /><br /> 
     Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
     </div> 
    </div> 
    }); 

    return <div id="" className=""> 
    <div>{ events }</div> 
    </div> 
} 
} 

Answer 1

Je ne sais pas la raison de l'erreur, et je ne peux pas le reproduire parce que je ne peux pas _.find() à courir, mais vous n'avez pas besoin lodash:

const events = this.state.event.filter(e => e.id === 1).map(...); 

Edit: I vérifié les documents lodash, et la raison de l'erreur est que _.find ne retourne pas un tableau/tableau vide, il renvoie un objet/undefined. Lodash a une méthode _.filter, qui aurait probablement fonctionné.

Answer 2

Essayez de changer import lodash from "lodash" à import _ from "lodash".

Answer 3

Cela devrait faire l'affaire:

const events = this.state.data.filter(data => data.id === 1).map(item => <div>{item.name}</div>; 

La raison pour laquelle vous obtenez Cannot read property 'map' of undefined est parce que vos données ne sont pas tiré par les cheveux et vous essayez de mapper.

Vous pouvez définir loading drapeau à l'état comme suit:

this.state = {event: [], loading: true}; 

Et l'ensemble en fonction EventGroup après fetch fait est de false:

this.setState({ event: data.results, loading: false }); 

Et puis en rendre la méthode:

render(){ 
    if(this.state.loading){ 
     return <LoadingComponent /> 
    } 

    // The rest of the code which will render if the data is fetched 
} 

Here is the fiddle.