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。 / p>

预期的输出是

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>

在反应中映射嵌套数组

3 个答案: