React 功能组件：TypeError: handleFlagChange is not a function

Question

考虑以下：

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

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

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

    useEffect(() => {

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

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

在 Child 中，我正在进行异步调用以填充数据表；

import { useDispatch } from 'react-redux';


function Child({handleFlagChange}) {

    const dispatch = useDispatch();
    const componentIsMounted = useRef(true)
    const [rows, setRows] = useState([]);

    useEffect(() => {

        if (currentProductItem && currentProductItem.value != null) {
            
               dispatch(getClientVariables(currentProductItem.value)).then(r => {
                rawData.current.Rows = r.payload;
                dispatch(getClientVariableTypesAll(currentProductItem.value)).then(r => {

                    rawData.current.ClientDataVariableTypes = r.payload.map(r => {
                        return {
                            value: r.ClientDataVariableTypeID,
                            label: r.ClientDataVariableTypeName
                        }
                    });;
                    setRows(rawData.current.Rows);
                    console.log('rawData', rawData);

                });
            });
        }
    }, [currentProductItem, justSavedNewVariableTypes, justSavedGrid]);

}

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

    console.log("rows ", rows);

    // if (componentIsMounted.current) {
    //  var flag = rows.some(item => item.ClientDataVariableTypeName == null)
    //  handleFlagChange(flag)
    // }

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

useEffect(() => {
    return () => {
        componentIsMounted.current = false
    }
},[])
    
   ....other code & rendering    
    
}

当行已通过行数组上的some function 的返回值在子级中验证行时，我期望父级的 useEffect 中的isFlagTrue控制台触发。

我已经尝试了两种解决方案，一种是通过使用useRef()将 ref 设置为 true 来确保已安装<Child/> （并使数据调用已满）。

在子级中： const componentIsMounted = useRef(true)

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


     if (componentIsMounted.current) {
       var flag = rows.some(item => item.ClientDataVariableTypeName == null)
       handleFlagChange(flag)
      }

}, []);

useEffect(() => {
    return () => {
        componentIsMounted.current = false
    }
},[])

但我得到TypeError: handleFlagChange is not a function

所以我尝试了：

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

有任何想法吗？

Answer 1

您是否考虑过为 function 使用默认值并让 React 的正常流程为您服务？

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

让我知道这个是否奏效。

Answer 2

我认为这是一个 typescript 错误，表示子组件中不知道 handleFlagChange 的类型。

您在这里有 2 个选项：

首先声明每个prop的类型，然后在function中使用：

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

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

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

其中() => void是 handleFlagChange function 的类型。