数组作为React中的状态？

问题描述

尝试像这样打印时，如何确保我的数组不为空？ ClientCodeRegional是我的数组，有时可能为空。

      {
       this.state.user.ClientCodeRegional[0]?
       <ul>{this.state.user.ClientCodeRegional.map((number) => <li key={number.toString()}>{number}</li>) }</ul>
        :null
      }

您可以检查数组长度。

  {
   this.state.user.ClientCodeRegional.lenght && 
     <ul>{this.state.user.ClientCodeRegional.map((number) => 
        <li key={number.toString()}>{number}</li>) }
     </ul>
  }

检查数组ClientCodeRegional的长度，如果长度大于0，则在ClientCodeRegional上显示带有循环的列表。

 {
   this.state.user.ClientCodeRegional.length>0 && 
     <ul>{this.state.user.ClientCodeRegional.map((number) => 
        <li key={number.toString()}>{number}</li>) }</ul>
 }

您应该对较短的代码使用解构分配

const { ClientCodeRegional } = this.state.user

{
  ClientCodeRegional.length &&
  <ul>
   { ClientCodeRegional.map( number => <li key={number}>{number}</li>) }
  </ul>
}

我只是想知道为什么您需要将number.toString()转换为key属性。 我认为它会自动转换。