在反应中映射嵌套数组答案

【问题标题】：mapping a nested array in react在反应中映射嵌套数组
【发布时间】：2019-08-20 04:38:16
【问题描述】：

我正在尝试将 JSON 文件中的简历信息动态加载到 React 组件中。我能够正确加载公司、职位和时间框架，但是当我尝试获得加载职位的职责时，我不断收到错误消息。

JSON 的设计类似于：

[
{
  "company": "Company Name",
  "title": ["Position 1", "Position 2"],
  "time": ["January 2017 - Present", "January 2016 - December 2017"],
  "responsibilities": [["Responsibility 1", "responsibility 2", "responsibility 3"],["Thing 1","thing 2", "thing 3"]]
  },
]

每个数组的索引对应相同的信息。 IE 索引 0 是相同的标题、时间范围和职责。

我尝试了几种不同的尝试映射到内部数组的变体，但不断收到各种错误

      return (
        <div className='work'>
          {Data.map(({company, title, time, responsibilities, resp}, index)=>
            <div>
              <h1>{company}</h1>
              {title.map((title, index)=>
                <div key={index}>
                  <h2>{title}</h2>
                  <h3>{time[index]}</h3>
                  {responsibilities.map((respArr)=>
                  <ul key={index}>
                    {respArr.map(resp =>
                    <li>{resp}</li>
                    )}
                  </ul>
                  )}
                </div>
              )}
            </div>
          )}

我收到此代码的错误是

TypeError: Cannot read property 'map' of undefined
(anonymous function)
src/components/exp.js:14
  11 | {title.map((title, index)=>
  12 |   <div key={index}>
  13 |     <h2>{title}</h2>
> 14 |     <h3>{time[index]}</h3>
     | ^  15 |     {responsibilities.map((respArr)=>
  16 |     <ul key={index}>
  17 |       {respArr.map(resp =>

如果我删除带有责任.map 的部分，它会正确填充职位的公司、职务和时间范围，但我无法在每个职务/时间范围下为每个责任添加一个带有 li 的 UL。

预期的输出是

Company
Position 1
January 2017 - Present
-Responsibility 1
-Responsibility 2
-Responsibility 3

Position 2
January 2016 - December 2017
-Thing1
-Thing2
-Thing3

【问题讨论】：

您有硬编码数据吗？数据的来源是什么？
您的代码似乎没问题 - stackblitz.com/edit/react-mp9x4m。可能是您的数据源的问题。
类似于@ravibagul91 所说的，请注意您的代码不是 100% 可重现的，因为数据不是其中的一部分
感谢您的帮助。我确实回到了我的数据并进行了一些编辑，这有所帮助，但是它仍然不太正确。不是第一个职责数组与第一个标题匹配，第二个职责数组与第二个标题匹配，而是两个职责数组都属于两个标题。知道我哪里出错了吗？上面更新了预期的输出。

标签： javascript node.js reactjs ecmascript-6

【解决方案1】：

你应该像这样把你的职责从你的 title.map 中带出来

  return (
    <div className='work'>
      {Data.map(({company, title, time, responsibilities, resp}, index)=>
        <div>
          <h1>{company}</h1>
          {title.map((title, index)=>
            <div key={index}>
              <h2>{title}</h2>
              <h3>{time[index]}</h3>
            </div>
          )}
          {responsibilities.map((respArr)=>
            <ul key={index}>
              {respArr.map(resp =>
              <li>{resp}</li>
              )}
            </ul>
            )}
        </div>
      )}

【讨论】：

没有。代码很好。
为什么OP的代码错了？您的建议将改变responsibilities 的打印顺序和次数

【解决方案2】：

class App extends React.Component {
  render() {
    const sampleData = [{
      "company": "Company Name",
      "title": ["Position 1", "Position 2"],
      "time": ["January 2017 - Present", "January 2016 - December 2017"],
      "responsibilities": [
        ["Responsibility 1", "responsibility 2", "responsibility 3"],
        ["Thing 1", "thing 2", "thing 3"]
      ]
    }]
   return (
      <div className="work">
        {sampleData.map(({
          company, title, time, responsibilities, resp,
        }, index) => (
          <div>
            <h1>{company}</h1>
            {title.map((title, index) => (
              <div key={index}>
                <h2>{title}</h2>
                <h3>{time[index]}</h3>
              </div>
            ))}
            {responsibilities.map(respArr => (
              <ul key={index}>
                {respArr.map(resp => <li>{resp}</li>)}
              </ul>
            ))}
          </div>
        ))}
      </div>
    )}
    }

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

谢谢你。虽然这非常接近，但这并不是我所希望的。我已经为预期的输出更新了我的原始帖子，但基本上我希望得到与每个标题相对应的时间框架和职责，以便在每个标题下排列。任何额外的帮助表示赞赏。

【解决方案3】：

这是我能想到的。这确实给出了我正在寻找的输出，非常感谢大家的帮助。

return (
        <div className='work'>
          {Data.map(({company, title, time, responsibilities, resp})=>
            <div>
              <h1>{company}</h1>
              {title.map((title, index)=>
                <div key={index}>
                  <h2>{title}</h2>
                  <h3>{time[index]}</h3>
                  {responsibilities[index].map((resp)=>
                    <ul>
                      <li >{resp}</li>
                    </ul>
                  )}
                  </div>
              )}
            </div>
            )} 
         </div>

【讨论】：