React：useState传入数组失败，循环获取event_id控制台报错

1. 控制台报错“无法获取event_id的值” #

问题出在循环条件：i <= post.details.length。数组索引从0开始，假设post.details长度为n，最后一个元素的索引是n-1。当i等于post.details.length时，post.details[i]为undefined，访问它的event_id必然报错。

修改循环条件为i < post.details.length即可解决：

useEffect(() => {
  setTimeout(function() {
    if (post.details) {
      console.log(post.details[0].event_id,'EventId')
      const newArr2 = []
      // 将 <= 改为 <
      for (var i = 0 ; i < post.details.length; i++){
        newArr2.push(post.details[i].event_id)
      }
      setArray(array.concat(newArr2))
    } 
  }, 1000);
},[])

也可以用数组map方法简化代码，从根源避免索引错误：

const newArr2 = post.details.map(item => item.event_id)

2. 无法在useState中传入数组 #

当前setArray(array.concat(newArr2))存在闭包问题：由于useEffect依赖数组为空，array会一直保留组件初始化时的初始值，导致数组更新不符合预期。

改用函数式更新，通过useState的回调获取最新状态：

// 替换原setArray调用
setArray(prevArray => prevArray.concat(newArr2))

如果是直接设置新数组而非追加，直接传入数组即可：

setArray(newArr2)

另外建议把post加入useEffect的依赖数组，避免post.details更新后useEffect不触发：

useEffect(() => {
  setTimeout(function() {
    if (post.details) {
      const newArr2 = post.details.map(item => item.event_id)
      setArray(prevArray => prevArray.concat(newArr2))
    } 
  }, 1000);
// 加入post作为依赖
},[post])

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