Javascript 反应功能组件：类型错误：handleFlagChange不是功能

考虑以下几点：

我有一个带有嵌套子组件的父功能组件

function Parent(){
  const [isFlagTrue, setIsFlagIsTrue] = useState(false);

    const handleFlagChange = (bool) => setIsFlagIsTrue(bool)

    useEffect(() => {

    console.log("isFlagTrue ", isFlagTrue);
 }, [isFlagTrue])

  return (
    <Child handleFlagChange={handleFlagChange} />
  )
}

我希望父级的useffect中的

isFlagTrue

控制台在子级中的行已通过行数组上的

some

函数的返回值进行验证时触发

我尝试了两种解决方案，一种是通过使用

useRef（）

将ref设置为true来确保装入

（并确保数据调用已满）

儿童： 常量componentIsMounted=useRef（true）

但是我得到了

TypeError:handleFlagChange不是一个函数

于是我试着：

useEffect(() => {
        console.log("typeof handleFlagChange ", typeof handleFlagChange);

        if (componentIsMounted.current && typeof handleFlagChange != 'undefined' && typeof handleFlagChange != 'undefined') {
            console.log("foo ");
            var flag = rows.some(item => item.ClientDataVariableTypeName == null)
            handleFlagChange(flag)
        }
    }, []);

但这会产生：

typeof handleFlagChange  undefined. <---In the Child
isFlagTrue  false <--- In Parent

typeof handleFlagChange未定义
你是否考虑过使用函数的默认值，让正常的反应流成为你的？
function Child({handleFlagChange = () => {}})

让我知道这是否有效。
我认为这是一个typescript错误，表示handleFlagChange的类型在子组件中未知

您在这里有两个选项：

首先，首先声明每个道具的类型，然后在函数中使用它：

 type PropsType = { handleFlagChange: () => void }
    
 function Child({handleFlagChange}: PropsType)

或者尝试在函数本身中添加特定类型：

function Child({handleFlagChange: () => void})

其中
（）=>void
是handleFlagChange函数的类型。
尝试
handleFlagChange！==未定义的
或
！！handleFlagChange
检查是否定义了
handleFlagChange
，而不是
typeof
。将条件更改为
if（componentIsMounted.current&&handleFlagChange）
@LukasBach感谢您的响应！这不起作用。@RahulKumar谢谢我的朋友，但这也不起作用。我建议您制定一个计划，以缩小问题的范围，并确保您正在运行您认为正确的代码。在提供的场景中，我看不到任何明显的方法可以不定义
handleFlagChange
。这是一个好主意，让我试试这个。当然，您也可以使用PropTypes，Child.defaultProps={handleFlagChange:（）=>{}@AntonioPavicevac Ortiz事实并非如此——这忽略了一个潜在的问题或误解，给您留下了一个非功能性的
handleFlagChange
。最好隔离并修复潜在问题，例如，您是否有其他正在使用的
组件没有传递有效的
handleFlagChange
，如果是，原因是什么？这真的是潜在问题吗？我习惯于添加回退来防止这种情况。请让我知道，因为在这种情况下，即使在工作中，我也必须进行一次巨大的重构。@FelipeCandalCampos IMO这显然是一个潜在的问题：在发布的代码中，我看不出它是如何
未定义的
，因为它是直接传入的。这就是为什么我建议做一个单独的例子来证明正在发生的事情实际上正在发生，OP认为它正在发生的地方。如果您经常添加回退，这意味着您不信任自己的代码。故意不提供值是完全不同的情况，回退可能是也可能不是最好的解决方案。这里没有TypeScript，如果是TypeScript问题，它将出现在传输过程中，而不是在运行时。哦，是的，感谢您在@DaveNewton更正它
 type PropsType = { handleFlagChange: () => void }
    
 function Child({handleFlagChange}: PropsType)

function Child({handleFlagChange: () => void})