React Lodash groupBy

Question

当我在lodash中使用groupBy时，我得到了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>
  );
};

Answer 1

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

Answer 2

由于lodah的groupBy()返回一个对象，其中每个键都是您的一个类型，而值是具有该类型的项的数组，因此不能使用Array.map()迭代它。

但是，您可以使用lodash的map()。您需要一个map来迭代组，另一个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>
  );
};