javascript - Javascript 映射嵌套数组

Question

我有一个对象数组（“数组”），每个对象都包含其他对象数组。

[
  {
     name: "Object 1",
     question: [{value: "This", type: "text"}, {value: "is", type: "text"},  {value: "1", type: "number".]
     answer: [{value: "Answer", type: "text"}, {value: "is", type: "text"},  {value: "1", type: "number".]
  },
  {
     name: "Object 2",
     question: [{value: "This", type: "text"}, {value: "is", type: "text"},  {value: "2", type: "number".]
     answer: [{value: "Answer", type: "text"}, {value: "is", type: "text"},  {value: "2", type: "number".]
  },
]

在 React 中，我想渲染以下内容：

<Typography>This</Typography><Typography>is</Typography><Number>1</Number>
<Typography>Answer</Typography><Typography>is</Typography><Number>1</Number
<Typography>This</Typography><Typography>is</Typography><Number>2</Number>
<Typography>Answer</Typography><Typography>is</Typography><Number>2</Number

我已经尝试了以下方法，但无法弄清楚为什么其中一些无法正确映射。

array.map(snippet => {
 snippet.question.map(question => {
  return something here;
})

编辑为忘记了一个级别的对象

标签： javascriptarraysreactjs

Answer 1

尝试这样的事情。

array.map(snippet => (
  <>
    {snippet.question.map(que => {
      if (que.type === "text") {
        return <Typography>{que.value}</Typography>;
      } else if (que.type === "number") {
        return <Number>{que.value}</Number>;
      }
      return null;
    })}
    {snippet.answer.map(ans => {
      if (ans.type === "text") {
        return <Typography>{ans.value}</Typography>;
      } else if (ans.type === "number") {
        return <Number>{ans.value}</Number>;
      }
      return null;
    })}
  </>
));