Как проверить состояние в реакции?

Question

Только начал смотреть на reactjsx и пытаемся проверить, является ли массив (this.state.content) не определен и длиной> 0. Это часть методы визуализации:

display = (
     <section> 
      { 
       if (this.state.content.length >0) 
       { 
       this.state.content.map((item, i) => { 
        return <CardRenderer addPacks={true} key={i} container={item}/> 
       }) 
       } 
      } 
     </section> 
    ) 

Это не работает, однако, как я могу проверить эту длину arrayl сначала в jsx?

Answer 1

Try:

display = (
     <section> 
       { 
       this.state.content && this.state.content.map((item, i) => { 
        return <CardRenderer addPacks={true} key={i} container={item}/> 
       }) 
      } 
     </section> 
    ) 

&& будет короткое замыкание на карте, если this.state.content не определен, и если this.state.content имеет нулевую длину, карта не будет делать ничего (но не будет ошибкой).

Answer 2

Вы можете использовать оператор троичного

display = (
     <section> 
      { 
       (this.state.content && this.state.content.length > 0)? 
       { 
       this.state.content.map((item, i) => { 
        return <CardRenderer addPacks={true} key={i} container={item}/> 
       }) 
       } : null 
      } 
     </section> 
    )