React状态更新异常：循环仅向数组添加一个元素问题排查

为什么只添加1个元素？ #

React的setState是异步批量更新机制，在你的sheker函数循环中，每次调用setcubikinapole([...cubikinapole, obj])时，cubikinapole始终是函数执行时的初始空数组状态。6次更新最终会被合并，仅保留最后一次添加的元素，所以结果只新增1个元素。

为什么用push会报错？ #

React要求状态必须是不可变的，直接调用cubikinapole.push(obj)会修改原状态数组，违反了React的状态更新规则，导致组件状态异常并触发报错。

两种解决方案 #

方案1：一次性生成所有元素再更新 #

先循环生成6个随机元素的数组，再一次性调用setcubikinapole完成状态更新，避免多次异步更新的冲突：

function sheker(){
  const newCubs = [];
  for(let i=0;i<6;i++){
    let randomcub = Math.floor(Math.random() * 6);
    let obj = {
      id: new Date().valueOf() + i, // 加i避免循环中生成重复id
      title: cubs[randomcub].title,
      img: cubs[randomcub].img
    }
    newCubs.push(obj);
  }
  setcubikinapole([...cubikinapole, ...newCubs]);
}

方案2：使用函数式更新 #

利用setState的函数式写法，每次更新都基于最新的状态值：

function sheker(){
  for(let i=0;i<6;i++){
    let randomcub = Math.floor(Math.random() * 6);
    let obj = {
      id: new Date().valueOf() + i,
      title: cubs[randomcub].title,
      img: cubs[randomcub].img
    }
    // prevState是当前最新的状态数组
    setcubikinapole(prevState => [...prevState, obj]);
  }
}

注意：两种方案中给id添加i，是因为循环执行速度极快，new Date().valueOf()可能生成重复的时间戳，导致id冲突，影响React列表渲染的正确性。

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