Компилятор React не примет мою функцию .map как функцию

Question

Я не могу получить подтверждение компилятора о том, что я передаю массив в функцию map, поэтому я продолжаю получать сообщение об ошибке, что моя функция .map не является функцией. Я просто хочу перечислить ссылки в неупорядоченном списке.

Я попытался присвоить данные универсальному массиву с помощью функции, и теперь это состояние greatgrandparent, где он назначается как массив. Я даже сделал точную копию кода с сайтаactjs, чтобы выполнить то, что я хочу, исходя из логики, используя функцию 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"}
]

установлен в состоянии.

1014 *

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>
    );
}

Edit: я видел некоторые вещи, которые были странными, вы используете "Links" для имени массива и имени элемента карты, у меня были некоторые проблемы с этим

В ответе listLinks - это не функция, а новый массив

Или, как люди говорили в комментариях, может быть, это не массив: x