使用react-native-table-component渲染表格时出现device.map undefined报错

• 初始化devices时错误将undefined包装为数组元素：首次渲染时useEffect还未执行接口请求，state.auth.availableDevice为undefined，你执行const devices = [useSelector(xxx)]相当于直接把undefined塞进数组，导致devices初始值为[undefined]，遍历的时候访问item的属性自然报错。
• 无用的判断逻辑：你写的if-else块内部重新用const声明了devices变量，属于块级作用域，完全不会修改外部的devices变量，这段代码没有任何作用。
• 表格数据格式不符合组件要求：react-native-table-component的Rows组件要求传入的data为二维数组，你当前map生成的是对象数组，同时还错误使用了不存在的name字段（从FlatList代码可以看出设备字段是TargetId、TargetName）。
• 样式缺失：你注释的Table代码中用到了styles.head和styles.text，但样式表中没有定义对应规则。

1. 修正devices的取值逻辑，默认值设为空数组，避免初始值为undefined：

// 错误写法：const devices = [useSelector(state => state.auth.availableDevice)];
// 正确写法：
const devices = useSelector(state => state.auth.availableDevice) || [];

2. 直接删除无用的if-else判断块，没有任何实际作用。
3. 按照表格要求生成符合格式的二维数组：

const tableHead = ['Target Id','Target Name']
// 按表头顺序生成二维数组，使用实际存在的字段
const tableRows = devices.map(item => [item.TargetId, item.TargetName]);

4. 样式表中补全表格需要的样式：

const styles = StyleSheet.create({
  // 原有样式保留，新增以下内容
  head: {
    height: 40,
    backgroundColor: '#f1f8ff'
  },
  text: {
    margin: 6
  },
  card: {
    flex: 1,
    margin: 5,
    padding: 10
  }
});

5. 恢复Table组件的注释即可正常渲染。

补充说明：你当前的FlatList也存在首次渲染报错的潜在风险，只是因为接口请求返回速度快或者渲染优先级的问题暂时没触发，修复devices取值逻辑后两个组件都可以稳定运行。

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