функция map не возвращает значения - PullRequest
Новая
       21

функция map не возвращает значения

0 голосов
/ 30 апреля 2020

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

const showAllCategories = () =>{
      return  categories.map((c,i)=>{
                <Link  key={i} href ={`/categories}`} >
                    <a className="btn btn-outline-primary mr-1 ml-1 mt-3"> {c.name }</a>
                </Link>
        })
    }

Я пытаюсь вернуть имя категории внутри тега раздела html

<section>
                            {/* <p>Show categories and tags</p> */}
                            <div className="pb-5">
                                    {JSON.stringify(showAllCategories())}
                                {showAllCategories()}
                                {showAllTags()}

                            </div>
                        </section>

Я попытался отладить, используя JSON .stringyfy, но показывает [null,null,null,null,null,null,null,null]

Ответы [ 3 ]

1 голос
/ 30 апреля 2020

Вам не хватает ключевого слова возврата, оно должно быть таким: 

const showAllCategories = () => {
  return  categories.map((c,i)=> {
      return (<Link  key={i} href={`/categories}`} >
          <a className="btn btn-outline-primary mr-1 ml-1 mt-3"> {c.name }</a>
      </Link>
    );
  })
}
1 голос
/ 30 апреля 2020

Как уже говорили другие, вы пропускаете ключевое слово return.

ES6 вы можете возвращать вещи в одну строку, опуская открытую скобку {. Что, я думаю, вызывает путаницу у многих людей. Возьмите эти 2 примера.

categories.map((c, i) => c.name);

Вышеуказанный автоматический возврат c .name.

categories.map((c, i) => { return c.name; });

То же, что и это, но как только вы откроете скобки {, вам понадобится возврат внутрь.

0 голосов
/ 30 апреля 2020 
const showAllCategories = () => {
  return categories.map((c, i)=> {
    // you forgot return here
    return (
            <Link  key={i} href ={`/categories}`} >
                <a className="btn btn-outline-primary mr-1 ml-1 mt-3"> {c.name }</a>
            </Link>
       )
    })
}

или немного короче - 

const showAllCategories = () => categories.map((c, i) => (
    <Link key={i} href={`/categories}`}>
        <a className="btn btn-outline-primary mr-1 ml-1 mt-3"> {c.name}</a>
    </Link>
);
...