React组件ConsoleDetails访问属性前添加data&&的作用是什么

核心原因如下： #

• index可能为无效值，导致data本身为undefined
  你声明oneConsoleDataIndex时用的是useState()没有传入默认值，初始状态就是undefined，此时statusData[undefined]的返回结果就是undefined；另外切换控制台时如果传入的index超过statusData的数组长度，或者数组被清空重置，也会出现取到undefined的情况。
• 上下文数据可能存在异步加载的空窗期
  StatusDataContext里的statusData如果是通过接口异步请求获取的，初始值大概率是空数组，哪怕此时index是合法值，空数组取下标也会返回undefined。
• 不做前置判断会直接触发运行时报错
  JS中如果直接读取undefined的属性，会抛出Uncaught TypeError: Cannot read properties of undefined (reading 'xxx')的错误，会直接导致组件渲染失败，页面白屏崩溃。

补充说明 #

你在ConsoleDisplay组件中不需要判断data是否存在，是因为你用了statusData.map遍历数组，只有数组中真实存在的元素才会进入遍历回调，回调拿到的data一定是存在的，所以不需要额外判断。

优化方案 #

现在React项目基本都支持ES2020+语法，可以用可选链操作符?.简化写法，不用每次都写data &&：

// 原写法
{data && data.console_nickname ? data.console_nickname : data && data.console_id}
// 简化后写法，效果完全一致
{data?.console_nickname ?? data?.console_id}

// 属性访问也可以简化
!timesUp && data?.['cycle in progress 1']

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