映射函数反应

Elder 发表于 Dev

长老

我有一个分组的对象。然后我将对象交换为数组：const objectToArray = ["Since", Array(7)]。然后我想映射数组以获取它objectToArray[0]（显示图片）和objectToArray[1]（显示问题列表）。我想在下面展示类别照片和问题列表。

import { groupBy } from 'lodash';
import QuestionsListItem from './QuestionListItem';

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

const QuestionsList = ({ questions }) => {
  const groupByList = groupBy(questions.questions, 'type');
  const objectToArray = Object.entries(groupByList);

  const questionListItem = objectToArray.map((array) => (
    <img src={imagePath(`./${array[0]}.png`)} alt="star" />,
    array[1].map((question) => (
      <QuestionsListItem
        key={question.id}
        question={question}
      />
    ))));


  return (
    <div>
      <ul>
        { questionListItem }
      </ul>
    </div>
  );
};

代码显示了一个错误：Line 14: Unexpected use of comma operator no-sequences就是这样<img src={imagePath(./${array[0]}.png)} alt="star" />,

删除逗号时，会出错

  Line 15:  Parsing error: Unexpected token, expected ","

  13 |   const questionListItem = objectToArray.map((array) => (
  14 |     <img src={imagePath(`./${array[0]}.png`)} alt="star" />
> 15 |     array[1].map((question) => (
     |     ^
  16 |       <QuestionsListItem
  17 |         key={question.id}
  18 |         question={question}

如何解决这个问题呢？提前致谢：）

科林·里卡多

有点晦涩的错误，但是按照您现在的方式，您将在同一级别返回多个节点，因此您需要用一些东西包装它。

试试这个：

const questionListItem = objectToArray.map(array => (
  <React.Fragment>
    <img src={imagePath(`./${array[0]}.png`)} alt="star" />
    array[1].map((question) => (
    <QuestionsListItem key={question.id} question={question} />)
  </React.Fragment>
));

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。