使用useState()时targets数组[0].name未定义，点击后[1].name正常的疑问

核心原因：控制台引用类型的“实时显示”特性 + 异步数据加载时机 #

你遇到的问题大概率是React组件初始渲染时，targets数组还未完全加载完成，但浏览器控制台打印引用类型（数组/对象）时，会显示它们的最新状态，而非代码执行瞬间的状态，这就造成了“targets已经存在但targets[0].name是undefined”的错觉。

具体逻辑：

• 组件第一次渲染时，targets可能还是空数组或者未填充数据的状态，此时targets[0]本身就是undefined，访问.name自然得到undefined。
• 浏览器控制台会保留对targets数组的引用，当后续数据加载完成、targets被更新后，控制台里显示的targets会自动刷新为最新的完整数组，让你误以为初始渲染时targets就已经有数据了。
• 当你点击触发setCount更新count时，组件会重新渲染，此时targets已经加载完成，所以targets[1].name能正常获取。

另外还有一种小概率可能：targets数组的第一个元素确实没有name属性，但第二个元素有。你可以在初始渲染时打印targets[0]的具体内容验证：

console.log('targets[0]:', targets[0]); // 查看该输出是否为undefined或无name属性

解决办法 #

如果是异步加载导致的问题，需要确保在targets数据就绪后再访问其元素：

• 用条件渲染判断targets是否有数据：

  if (targets.length > 0) {
    console.log(targets[count].name);
  }
  

• 或者使用可选链操作符避免报错：

  console.log(targets[count]?.name);
  

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