Can'；t在WKWebview和react js中使用evaluateJavaScript（“function（）”）查找变量：function（）

我正在开发一个使用WKWebview和React js（钩子）的混合应用程序。 我需要从Ios向web发送用户id。（Javascript->Ios） 我正在尝试使用evaluateJavaScript（）完成此操作

如果我把我的函数放在index.html的标记中，这个方法就会起作用， 如果我把它放在组件中，它将不起作用。 将返回错误

可选（Error Domain=WKErrorDomain Code=4“发生JavaScript错误”UserInfo={WKJavaScriptExceptionLineNumber=0，WKJavaScriptExceptionMessage=TypeError:undefined不是函数，WKJavaScriptExceptionColumnNumber=0，NSLocalizedDescription=JavaScript错误发生}）

在我的IOS端完成导航（WKWebviewController）

Javascript

在index.html中

///this will work
<script type="text/JavaScript" charset="UTF-8">
function getUserIdFromNativeOnIndexHtml(id) {
                    alert('user is ' + id + '!!');
                }
            </script>

///这样就行了
函数getUserIdFromNativeOnIndexHtml（id）{
警报（'用户为'+id+'！！'）；
}

myCouponList.js

function MyCouponList(props) {
const classes = useStyles(props);


function getUserIdFromNativeOnTheComponentJS(id) {
    alert('user is ' + id + '!!');
}


return (
    <>
        <header className={classes.header}>
            <div className={classes.header__header_column}>
                <button
                    type="button"
                    className={classes.header_backButton}
                    onClick={() => window.webkit.messageHandlers.goBackButton.postMessage('goBackButton')}
                >
                    <img src="/assets/images/banto/backButton.png" alt="backButton" />
                </button>{' '}
            </div>{' '}
            <div className={classes.header__header_column}>
                <h1 className={classes.header__title}> 쿠폰 </h1>{' '}
            </div>{' '}
            <div className={classes.header__header_column}>
                <span className={classes.header__icon}>
                    <i className="fas fa-search"> </i>{' '}
                </span>
                <span className={classes.header__icon}>
                    <i className="fas fa-cog"> </i>{' '}
                </span>{' '}
            </div>{' '}
        </header>{' '}
        {}....

函数MyCouponList（道具）{
常量类=使用样式（道具）；
函数getUserIdFromNativeOnTheComponentJS（id）{
警报（'用户为'+id+'！！'）；
}
返回(
window.webkit.messageHandlers.goBackButton.postMessage（'goBackButton'）}
>
{' '}
{' '}
쿠폰 {' '}
{' '}
{' '}
{' '}
{' '}
{' '}
{' '}
{}....

我想在reducer中保存userid以进行API调用

function MyCouponList(props) {
const classes = useStyles(props);


function getUserIdFromNativeOnTheComponentJS(id) {
    alert('user is ' + id + '!!');
}


return (
    <>
        <header className={classes.header}>
            <div className={classes.header__header_column}>
                <button
                    type="button"
                    className={classes.header_backButton}
                    onClick={() => window.webkit.messageHandlers.goBackButton.postMessage('goBackButton')}
                >
                    <img src="/assets/images/banto/backButton.png" alt="backButton" />
                </button>{' '}
            </div>{' '}
            <div className={classes.header__header_column}>
                <h1 className={classes.header__title}> 쿠폰 </h1>{' '}
            </div>{' '}
            <div className={classes.header__header_column}>
                <span className={classes.header__icon}>
                    <i className="fas fa-search"> </i>{' '}
                </span>
                <span className={classes.header__icon}>
                    <i className="fas fa-cog"> </i>{' '}
                </span>{' '}
            </div>{' '}
        </header>{' '}
        {}....