React Native中传递useState相关值到子组件为何有时为undefined？

问题根因 #

多次打印触发原因 #

• 父子组件联动渲染逻辑：父组件A发生重渲染时，默认所有子组件都会跟随重渲染。A的text状态变更、A的父组件触发A重渲染，都会导致B组件重复执行，打印语句多次运行。
• 开发环境严格模式影响：如果项目开启了React StrictMode，开发环境下组件会被强制额外渲染一次用于检测不规范的副作用代码，也会多触发一次打印。
• B组件自身重渲染：如果B内部有状态更新、副作用触发的重渲染逻辑，也会执行打印语句。

props为undefined的原因 #

• 基础语法错误：你提供的代码中B组件内写的是console log，缺少英文句号，正确写法是console.log，语法错误会导致变量读取异常。另外如果A组件未正确导入useState，会导致状态初始化失败，传递给B的props自然为undefined。
• 挂载时机问题：如果你是通过条件渲染、路由导航动态加载B组件，可能出现B组件已经开始初始化，但父组件的props还未完成传递的情况，首次渲染就会拿到undefined。
• 导入导出错误：如果B组件是单独抽离的文件，导入导出语法不匹配（比如默认导出用了命名导入），会导致组件接收props异常。

修复方案 #

• 先修正基础语法：
  1. 补全打印语句的句号：console.log(_text, _setText)
  2. 确保A组件顶部已经导入依赖：

  import { useState } from 'react'
  import { View } from 'react-native'
  

• 减少不必要重渲染：用React.memo包裹B组件，对props做浅比较，仅当props变更时才重渲染B：

  import { memo } from 'react'
  const B = memo(({_text, _setText}) => {
    console.log(_text, _setText);
    // 其余逻辑
  })
  

• 加兜底逻辑避免undefined：给B组件的props设置默认值，或者在渲染B的位置加条件判断，保证props存在时才挂载组件：

  // 方案1：props加默认值
  const B = ({_text = '', _setText = () => {}}) => { /* 逻辑 */ }
  
  // 方案2：条件挂载B
  {text !== undefined && <B _text={text} _setText={setText} />}
  

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