carte n'est pas une fonction jsx

Ce bloc de code a provoqué une erreur de carte n'est pas une fonctioncarte n'est pas une fonction jsx

{data && (data.devices || {}).map((obj, i) => 
    <div>{obj.name}</div> 
)}

Je ne comprends pas, je l'ai déjà fait data && pour vérifier les données est défini d'autre garder la carte . Et aussi data.devices || {} pour vérifier si la propriété devices est là ou non.

I console.log(data.devices) est de retour indéfini mais il devrait fallback à un objet droit? pourquoi est-il encore en train de se briser?

Source

2017-09-29 Cecilia Chan

'.map' est une fonction sur les tableaux, pas sur les objets. Changez-le en 'data.devices || [] ' –

@NicholasTower essayé, il est toujours le même, il dit' ne peut pas lire la propriété 'carte' de undefined' –

À l'origine, vous avez dit que l'erreur était «carte n'est pas une fonction». Vous dites qu'après le changement c'est "toujours le même", mais c'est "Can not read property 'map' de undefined'. Pouvez-vous préciser si l'erreur a changé ou non? –

Il n'y a pas .map originaire {}, donc remplacer data.devices || {} à data.devices || []

{(data && data.devices || []).map((obj, i) => 
    <div>{obj.name}</div> 
)}

Source

2017-09-29 03:38:49 Shreyas

ce travail est-ce que les données n'ont même pas une propriété appelée' devices'? –

oui, dans ce cas, la carte fonctionnera sur un tableau vide. – Shreyas

Dans ce cas map n'est pas une fonction parce que quand data.devices est vide, la valeur par défaut est un objet vide donc map est pas un fonction d'un objet. Prenez ceci par exemple:

// simulate scenarios 
 
const data00 = undefined; 
 
const data01 = {}; 
 
const data02 = { devices: null }; 
 
const data03 = { devices: [] }; 
 
const data04 = { devices: [{ name: 'device01' }, { name: 'device02' }] } 
 

 

 
class Main extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     {this.load(data00)} 
 
     {this.load(data01)} 
 
     {this.load(data02)} 
 
     {this.load(data03)} 
 
     {this.load(data04)} 
 
     </div> 
 
    ); 
 
    } 
 
    
 
    /** 
 
    * Loads data and renders the devices if there's any 
 
    */ 
 
    load(data) { 
 
    return (!!data && data.devices || []).map((obj, i) => 
 
     <div key={i}>{obj.name}</div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Main />, document.getElementById('main'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="main"/>

Comme vous pouvez le voir, seuls les périphériques de data04 seront rendus.

Source

2017-09-29 03:50:33 juliobetta

carte n'est pas une fonction jsx

Répondre

Questions connexes