React函数式组件内部自定义函数无法访问props问题求助

问题原因 #

1. 第一个示例中你仅声明了FirstInputSet函数，没有任何调用该函数的逻辑，所以内部的console.log自然不会执行，不会输出内容。
2. 补充的可复现代码中存在渲染条件拦截：renderFirstInputSet函数内判断props.firstInputValue为真才会返回FirstInputSet组件，只要这个值为假值（包括undefined、null、空字符串、0、false），就会直接返回null，FirstInputSet根本不会执行，自然无法渲染props.printFirstArray的内容。
3. 父组件传参异常：如果父组件调用Inputs组件时没有正确传递printFirstArray、firstInputValue属性，或者传递的值本身是空值，也会导致没有内容输出。

解决方法 #

• 先确认渲染条件是否满足，在renderFirstInputSet中添加日志确认props.firstInputValue的实际值：

const renderFirstInputSet = () => {
    console.log('firstInputValue当前值：', props.firstInputValue)
    if (props.firstInputValue)
        return <FirstInputSet />
    else
        return null;
}

如果打印结果为假值，检查父组件是否正确传递了firstInputValue属性。

• 确认Inputs组件收到的props是否正确，在组件顶层打印完整props校验：

const Inputs = (props) => {
    console.log('Inputs收到的完整props：', props)
    // 剩余组件逻辑
}

如果打印结果中不存在printFirstArray或者值为空，检查父组件的传参逻辑。

• 也可以调整FirstInputSet的调用方式，直接作为普通函数执行，避免嵌套组件的潜在问题：

const renderFirstInputSet = () => {
    if (props.firstInputValue)
        return FirstInputSet() // 直接执行渲染函数，不使用JSX组件标签调用
    else
        return null;
}

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