在反應中映射嵌套數組

Question

我試圖將簡歷信息從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 =>

如果我刪除了帶有respons.map的部分，它將正確填充該職位的公司，職位和時間表，但我還無法為每個職位/時間表下的每個職責添加帶有li的UL。

預期的輸出是

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

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

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

Answer 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> 

Answer 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>