React中使用setInterval向空列表添加对象出现null值如何解决

问题原因 #

• 列表拼接逻辑放在了useEffect的同步执行块，而非定时器回调中，只要seconds发生变化、组件重新渲染，就会立刻执行一次拼接操作，并非按预设间隔触发
• 当seconds取值等于winners数组长度时，winners[seconds]为无效下标，返回undefined，拼接进数组后就会生成null项
• 每次seconds变化都会重新创建新的定时器，存在多定时器并行的逻辑冲突，同时终止定时器的判断位置错误，无法正常结束定时任务

修复方案 #

调整逻辑，将列表更新操作放到定时器回调内，无需额外维护seconds状态，直接通过当前list的长度判断待插入的元素即可，定时器仅需在组件挂载后初始化一次：

const [list, setList] = useState([])
const winners = [
  {
    name: 'john',
    price: '200'
  },
  {
    name: 'Micheal',
    price: '230'
  }
]

useEffect(() => {
  // 每隔1秒触发一次插入操作
  const interval = setInterval(() => {
    setList(prevList => {
      // 所有winner插入完成后清除定时器
      if (prevList.length >= winners.length) {
        clearInterval(interval)
        return prevList
      }
      // 拼接下一个元素
      return prevList.concat(winners[prevList.length])
    })
  }, 1000)
  // 组件卸载时清除定时器
  return () => clearInterval(interval)
}, [winners])

内容的提问来源于stack exchange，提问作者Gabriel Udo