React Native列表项重复、多倍渲染问题如何解决

实现日历数据与日程预约数据的匹配校验逻辑时，当存在2条及以上预约记录，列表渲染项会出现重复、甚至三倍渲染的异常。

原问题代码如下：

{ programari.map(val=>{

  if(val.date==selectedDate){
    if(val.hour==hour){
      return(
        <RadioButton.Item label={hour} value={hour} disabled={true} style={{backgroundColor:'red',opacity:0.4}} />
      )  
    }        
    else return <RadioButton.Item label={hour} value={hour} disabled={false} style={{backgroundColor:'green',opacity:0.4}} />
  }

})}

渲染逻辑写反了遍历对象：直接遍历预约记录数组programari生成时间单选按钮，数组里有多少条同选中日期的预约记录，就会生成多少个单选按钮，预约数≥2时自然出现重复渲染。同时代码没有对遍历项做不匹配场景的返回处理，会默认返回undefined占位，进一步加剧渲染异常；另外列表项未设置唯一key，也会触发React虚拟DOM复用导致的渲染错乱。

1. 先定义你需要展示的全部可选小时集合，替换为实际业务的时间范围即可
2. 遍历小时集合生成单选按钮，每渲染一个小时项时，再去预约列表中校验当前时间是否已被预约

{
  // 替换为你实际需要展示的可选小时列表，示例为9点到18点的整点时间
  const availableHours = Array.from({length: 10}, (_,i) => `${9+i}:00`)
  availableHours.map(hour => {
    // 校验当前选中日期下，该小时是否存在已预约记录
    const hasBooked = programari.some(record => record.date === selectedDate && record.hour === hour)
    return hasBooked ? (
      <RadioButton.Item
        key={hour}
        label={hour}
        value={hour}
        disabled
        style={{backgroundColor:'red',opacity:0.4}}
      />
    ) : (
      <RadioButton.Item
        key={hour}
        label={hour}
        value={hour}
        disabled={false}
        style={{backgroundColor:'green',opacity:0.4}}
      />
    )
  })
}

• 所有列表渲染项必须传入唯一的key属性，避免React DOM节点复用异常
• 单时间点的预约状态校验用Array.some()即可，匹配到第一条符合条件的预约就会终止遍历，性能更高
• 遍历分支必须覆盖所有场景，不要出现无返回值的分支，避免渲染出空节点占位

内容的提问来源于stack exchange，提问作者Asaftei Nicoleta