首页 > 解决方案 > React:未定义嵌套箭头函数

问题描述

出色地。我又把东西弄坏了。

所以这里的想法是我正在尝试创建一个箭头函数来显示一些数据,并且在这个过程中我的目标是在第一个中创建一个 SECOND 箭头函数来将一些数据映射到一个列表中但是事情已经坏了.

根据我的浏览器,serverInfoTabList没有定义。

const VarInfo = (props) =>  {

    serverInfoTabList = (var) => {
        if (var != undefined){
            return //mappingstuff {
                //more var stuff
                return (
                    <li 
                        {var}
                    </li>
                );
            });
        }
    }

    return (
        props.var!= undefined ? 
        <div className={props.var}>
            <h1>{props.var.map}</h1>
            {/* <img src={props.var.image}/> */}
            <div>
                <ul>  
                    {this.serverInfoTabList(props.var)}
                </ul>
            </div>
        </div>
        : 
        null
    );
}

标签: javascriptreactjsarrow-functions

解决方案


改变

this.serverInfoTabList(props.var)

serverInfoTabList(props.var)

由于您定义了一个功能组件,因此您不需要this在此特定上下文中使用。如果您将组件定义为一个类,那么您需要使用this.

注意:不要var用作变量名,因为这是 JavaScript 中的保留字。


推荐阅读