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

Question

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

我已经尝试在函数中将数据分配给一个通用数组，现在它是曾祖 parent 的状态，它被分配的地方被设置为一个数组。我什至从 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