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 的類型。