Question

当我将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>
  );
};

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()。您将需要一个映射来迭代组，而另一个映射来迭代其中的项目。您可以使用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>
  );
};

反应Lodash组

2 个答案: