this.props.data.maps ist NUR eine Funktion, wenn this.props.data.length im selben Block ist

Question

Ich bekomme ein seltsames Verhalten. Die Datei this.props.data unten ist ein Array von meinem Redux-Speicher und ich kann sehen, dass es nicht undefiniert oder leer ist, wenn dieser Fehler auftritt.

Wenn ich die this.props.data.length > 5 unten herausnehmen, funktioniert alles super .. aber sobald ich es hinzufügen, löst mein Projekt den Fehler this.props.data.maps is not a function.

{ 
        ((this.props.data) !== undefined) ? (
        ((this.props.data).length > 0) ? (
         (this.props.data).map((index) => { 

         var numberSize = ''; 
         if (index.number > 100000 === 0) { 
         numberSize = 'Huge number'; 
         } else if (index.number > 1000 === 0) { 
         numberSize = 'Big number' 
         } else if (index.number > 100 === 0) { 
         numberSize = 'Medium number'; 
         } else { 
         numberSize = 'Small number'; 
         } 
         return (
          <div> 
          {numberSize} 
          </div> 
         ); 
         }) 
//..beginning here 
         ((this.props.data).length < 5) ? (
         <button onClick={this.addToArray}>Add a number to the data</button>   
        ) : (
         <span>The data array is full (5 objects). No Numbers can be added.</span> 
        ) 
//..ending here. If I take this out, everything runs fine. 
        ) : (
         <button onClick={this.addToArray}>Add a number to the data</button>   
        ) 
       ) : (
        <button onClick={this.addToArray}>Add a number to the data</button>   
       ) 
    } 

Versteht jemand, warum in den this.props.data.length > 5 Zugabe wird, dass this.props.data.maps is not a function die Fehler zu werfen?

Dank

Answer 1

Es gibt eine ) bei Konditionaloperator fehlt. Wichtiger ist, nach .map() Aufruf ist es nicht klar, was Logik ist.

Weglassen unnötiger Klammern wir, dass es finden folgende .map() Aufruf ein Syntaxfehler, wenn &&AND oder ||OR nicht in Anspruch genommen werden. Was führt uns zurück zu dem erwarteten Ergebnis des Teils javascript nach .map() ist?

this.props = {data:[1,2,3]}; 
 

 
this.props.data !== undefined 
 
    ? this.props.data.length > 0 
 
    ? this.props.data.map((index) => { 
 
     console.log(index); 
 
     //...some logic for the return 
 
     return (index * 10); 
 
     }) 
 
     // && 
 
     /* 
 
     Syntax error here 
 
     */ 
 
    //..beginning here 
 
    this.props.data.length < 5 
 
     ? console.log("less than 5", this.props.data.length) 
 
     : console.log("greater than 5", this.props.data.length) 
 
    //..ending here. If I take this out, everything runs fine. 
 
    : console.log("inner") 
 
    : console.log("outer")

this.props = {data:[1,2,3]}; 
 

 
this.props.data !== undefined 
 
    ? this.props.data.length > 0 
 
    ? this.props.data.map((index) => { 
 
     console.log(index); 
 
     //...some logic for the return 
 
     return (index * 10); 
 
     }) 
 
     && 
 
     /* 
 
     what are you trying to achieve here? 
 
     */ 
 
    //..beginning here 
 
    this.props.data.length < 5 
 
     ? console.log("less than 5", this.props.data.length) 
 
     : console.log("greater than 5", this.props.data.length) 
 
    //..ending here. If I take this out, everything runs fine. 
 
    : console.log("inner") 
 
    : console.log("outer")