React Native报错：Invalid attempt to destructure non-iterable instance排查

错误原因 #

你遇到的Invalid attempt to destructure non-iterable instance错误，根源在Title.js组件中：React组件接收的props是对象类型，但你错误地使用数组解构语法去解析它，而对象本身不是可迭代的数组，导致解构失败。

同时标题样式未生效，是因为style属性用了逗号表达式，只会应用最后一个样式对象，之前的styles.title会被忽略。

修复方案 #

1. 修正props解析方式 #

把数组解构改为对象解构，正确读取传入的titleText和backgroundColor属性；

2. 合并样式 #

将style的逗号表达式改为数组，合并组件基础样式和传入的背景色样式。

修正后的Title.js代码：

import React from 'react'
import { Text, StyleSheet } from 'react-native'

const Title = (props) => {
  // 用对象解构替代数组解构
  const { titleText, backgroundColor } = props

  // 用数组合并多个样式
  return (
    <Text style={[styles.title, { backgroundColor: backgroundColor }]}>
      {titleText}
    </Text>
  )
}

const styles = StyleSheet.create({
  title: {
    fontSize: 35,
    paddingHorizontal: 25,
    paddingVertical: 5,
    alignSelf: 'center'
  }
})

export default Title

额外优化建议 #

• WaterConsumption.js中的TextInput设置了固定宽度400，小屏幕设备上可能超出视图范围，可改为百分比宽度（比如width: '90%'）提升适配性；
• convertAmount函数可提前判断输入有效性，替代try/catch：

const convertAmount = () => {
  const num = parseFloat(text)
  if (isNaN(num)) {
    setAmountOfWater('Try again! Enter a valid number')
    return
  }
  const liters = num * 0.24
  setAmountOfWater(`${liters.toFixed(2)} liters`) // 保留两位小数更友好
}

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