Question

我无法获得将数组传递给map函数的编译器确认，因此我不断收到错误消息，表明我的.map函数不是函数。我只想在无序列表中列出链接。

我已经尝试将数据分配给函数中的通用数组，现在它是曾祖父母的状态，将其分配给的状态设置为数组。我什至在reactjs站点附近制作了代码的紧密副本，以实现我想要的逻辑之外的使用map函数的代码。

const mobileMenu = (props) => {

    return (
        <div className={classes.MobileMenu}>
        <h1 id={classes.MobileMenu__Title}>Water Resources</h1>
        <div>
            <button id={classes.LoginButton}>Login</button>
            <button id={classes.RegisterButton}>Register</button>
        </div>
        <div>
        {menuLinks(props.links)}
        </div>
    </div>
    );
}

通话

const menuLinks = (links) => {
    console.log (links);
    let Links = links;
    const listLinks = Links.map((Links) =>
    (<li key={Links.index.toString()}>
    <a href={Links.link}>{Links.name}</a>
    </li>));
    return (

        <ul>           
            {listLinks()}        
        </ul>
);}

调试器指出该对象是一个链接数组，但我不断收到错误消息，即列表链接函数未定义。

mainlinks = [
      {name: "Home", link: "#Home"},
      {name: "Calculator", link: "#Calculator"},
      {name: "Reference", link: "#reference"},
      {name: "About", link: "#About"}
]

处于状态的

。

Answer 1

问题出在这里

{listLinks()}

您正在尝试执行不是函数的函数listLinks。

只需使用{listLinks}而不带括号，如下所示，

const menuLinks = (links) => {
        console.log(links);
        const listLinks = links.map(link =>{
           return (
              <li key={link.name}>
                  <a href={link.link}>{link.name}</a>
              </li>
           )
        }); 
        return (
            <ul>           
             {listLinks}        
            </ul>
        );
    }

如果您要接收一组对象，则可以在对象https://hackernoon.com/5-techniques-to-iterate-over-javascript-object-entries-and-their-performance-6602dcb708a8上进行迭代

Answer 2

也许是这样吗？


const menuLinks = (links) => {    
    return (
        <ul>           
         {
            links.map(link => (
              <li key={link.name}>
                <a href={link.link}>{link.name}</a>
              </li>
            ))
         }        
        </ul>
    );
}

编辑：我看到一些奇怪的东西，您正在使用“链接”作为数组名称和地图元素名称

作为回报，listLinks不是函数，而是新数组

或者就像人们在评论中说的那样，它可能不是数组：x

React编译器不会接受我的.map函数作为函数

2 个答案: