Реагировать на группу Лодаша - PullRequest
Новая
       9

Реагировать на группу Лодаша

0 голосов
/ 10 декабря 2018

когда я использую groupBy с lodash, я получаю TypeError: Object(...)(...).map is not a function.Когда я использую sortBy, у меня нет такой проблемы.Моя цель - составить список вопросов.В начале я хочу показать картинку с категорией, затем список вопросов. 

const images = require.context('../../img', true);
const imagePath = (name) => images(name, true);

const QuestionsList = ({ questions }) => {


  const questionListItem = questions && questions.questions ?
    groupBy(questions.questions, ['type']).map((question) => (
      <>
        <img src={imagePath(`./${question.type}.png`)} alt="star" />
        <QuestionsListItem
          key={question.id}
          type={question.type}
          question={question}
        />
      </>
    )) : null;
  return (
    <div>
      <ul>
        { questionListItem }
      </ul>
    </div>
  );
};

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

Поскольку lodah's groupBy() возвращает объект, где каждый ключ является одним из ваших типов, а значение является массивом элементов с этим типом, вы не можете повторить его с Array.map().

Однако вы можете использовать lodash's map().Вам понадобится одна карта для итерации групп, а другая для итерации элементов внутри.Вы можете использовать flow() для переноса операций.

Пример (не тестировался): 

const renderGroupupItems = flow([
  arr => groupBy(arr, ['type']),
  groups => map(groups, group => 
    map(group, question => (
      <>
        <img src={imagePath(`./${question.type}.png`)} alt="star" />
        <QuestionsListItem
          key={question.id}
          type={question.type}
          question={question}
        />
      </>
    )
  )
]);

const QuestionsList = ({ questions }) => {
  const questionListItem = has(questions, 'questions') ?
    renderGroupedItems(questions.questions) : null;

  return (
    <div>
      <ul>
        { questionListItem }
      </ul>
    </div>
  );
};
0 голосов
/ 10 декабря 2018

Lodash groupBy возвращает объект, а не массив, поэтому вы не можете отобразить его.Вам нужно будет просмотреть свойства объекта и отобразить массивы, содержащиеся в этих значениях. 

for (let key in questions) {
  questions[key].map(q => (
        <>
           <img src={imagePath(`./${q.type}.png`)} alt="star" />
           <QuestionsListItem
              key={q.id}
              type={q.type}
              question={q}
           />
        </>
    )
}
...