this.props.data.maps不是一個函數只當this.props.data.length在同一個塊

Question

我收到了一些奇怪的行爲。下面的this.props.data是來自我的Redux存儲的一個數組，我可以看到發生此錯誤時它不是未定義的或空的。

當我拿出下面的this.props.data.length > 5，一切都很好..但是一旦我加入它，我的項目會拋出錯誤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>   
       ) 
    } 

有誰明白爲什麼在this.props.data.length > 5添加拋出的錯誤this.props.data.maps is not a function？

感謝

Answer 1

有一個在有條件的經營者缺少)。更重要的是，以下.map()調用它並不清楚是什麼邏輯。

忽略我們發現，將有一個語法錯誤以下.map()調用如果不使用&&AND或||OR不必要的括號。這導致我們回到javascript以下的.map()部分的預期結果是什麼？

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")