React Native中这种变量设置方式是否正确？Hook返回值如何在render中使用？

• 第一种提前定义外层可变变量赋值的写法可以正常运行，但存在明显缺陷：
  • 代码冗余，每新增一个需要使用的loan属性就要额外声明一个外层临时变量，维护成本随属性数量上升快速升高
  • 可读性差，变量声明和赋值逻辑分离，后续迭代需要额外查找变量的赋值位置
  • 没有利用JS原生语法特性，写法繁琐
• 第二种直接在渲染节点内做判空的写法更简洁，适合属性引用次数少的场景，但如果同一属性需要在多处引用，重复写判空逻辑会产生冗余代码，也容易出现书写错误。

推荐实现方案 #

根据你使用loan属性的数量多少，可以选择对应最优写法：

场景1：引用的loan属性少于3个 #

直接用可选链+空值合并运算符写在渲染逻辑内即可，比三元写法更简洁，也不会误过滤0、false这类合法业务值：

<Text style={styles.textWhite} accessibilityLabel="Interest rate">
  {loan?.interestRate ?? ""}
</Text>

场景2：引用的loan属性较多 #

在组件顶部解构时直接给默认值，不需要额外声明临时可变变量，所有属性取值逻辑统一集中，方便后续维护：

const LoanDetailCard = () => {  
  const loan = first(loanData?.loans); // 从hook拿到的变量
  // 解构时给默认空对象，避免loan为空时解构报错
  const {interestRate, transactionalBalance} = loan ?? {};

  return (
    <View style={styles.container}>
      <Text style={styles.textWhite} accessibilityLabel="Interest rate">
        {interestRate ?? ""}
      </Text>
      <Text style={styles.textWhite} accessibilityLabel="Transactional balance">
        {transactionalBalance ?? ""}
      </Text>
      {/* 其他用到属性的节点 */}
    </View>
  )
}

场景3：loan为空时整个卡片无需渲染 #

可以直接提前返回空，后续所有代码都不需要再加判空逻辑：

const LoanDetailCard = () => {  
  const loan = first(loanData?.loans);
  // 提前返回，省略后续所有判空操作
  if(!loan) return null;

  const {interestRate, transactionalBalance} = loan;

  return (
    <View style={styles.container}>
      <Text style={styles.textWhite} accessibilityLabel="Interest rate">
        {interestRate}
      </Text>
      <Text style={styles.textWhite} accessibilityLabel="Transactional balance">
        {transactionalBalance}
      </Text>
    </View>
  )
}

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