Javascript 如何从JSON映射嵌套数组？

恕我直言，我不擅长文字，在这里，我将尽力解释我在数组中映射嵌套数据的问题，我猜这个术语将被称为“使用ReactJS从本地API获取数据”。下面的代码是data.js中的数据，称为“本地API”

下面的代码显示了ReactJS中的两个组件文件index.js和App.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import data from './data/dataJS';


ReactDOM.render(
     <App data={data} />, 
      document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序
从“./data/dataJS”导入数据；
ReactDOM.render(
, 
document.getElementById（'root'）；

App.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
     const {data} = this.props;
      const resume = data.map(info => {

        //console log
        console.log(info.name);
        console.log(info.position);
        console.log(info.experiences);
        console.log(info.experiences.job);

        //browser render
        return (
          <div>
              {info.name}
              <br/>
              {info.position}

           </div>
          )
        });
      });

    return (
      <div>
          {<p>{resume}</p>}
      </div>
    );
  }
}

import React，{Component}来自'React'；
导入“/App.css”；
类应用程序扩展组件{
render（）{
const{data}=this.props；
const resume=data.map（信息=>{
//控制台日志
console.log（info.name）；
控制台日志（信息位置）；
控制台日志（信息体验）；
日志（信息、经验、工作）；
//浏览器渲染
返回(
{info.name}


{info.position}
)
});
});
返回(
{{resume}
}
);
}
}

到目前为止，我能够从browser console.log获取确认的数据，并将两个数据

info.name

呈现到John Doe和

info.position

呈现到developer，没有问题

现在，如果我在{info.position}下面添加了这个字符串

{info.experiences.job}

，我将得到一个错误

对象作为React子对象无效（找到：具有键{id，job，period，description}的对象）。如果要呈现子对象集合，请改用数组。

---

我想，我设置数组的方式是不正确的。但是

info.experiences

的console.log显示了（3）组经验的结果。但是控制台登录

info.experiences.job

显示未定义。然而，我无法弄清楚问题是什么，可能出了什么问题

我花了两天时间试图找到解决办法，但我一点运气也没有

---

有什么建议吗

这里有两件事需要解决：

• 在第一个示例中，

  呈现

  函数出现语法错误

  return

  您关闭了

  render

  函数体，因此无法 到达第二个

  返回（它甚至不应该渲染和抛出
  错误）

• 您正在尝试引用密钥中的对象？你用了一根绳子。 无论如何，键应该是其同级唯一的

  {info.experiences.job}

• 这应该是（但别着急，我们还没做完！）：

  {info.experiences.job}

• 体验

  未定义，我猜您想循环使用

  体验

  阵列：

  info.experiences.map（experience=>
  {experience.job}
  ）

无论如何，这里有一个运行和工作的示例：

const数据=[
{
姓名：“约翰·多伊”，
职位：“开发者”，
经验：[
{
id:0，
作业：“开发者1”，
期间：“2016-2017年”，
描述：“Lorem ipsum Door sit amet，是一位杰出的献身者。他是一位杰出的献身者。他是一位杰出的献身者
},
{
id:1，
工作：“开发者2”，
期间：“2015-2016年”，
描述：“Lorem ipsum Door sit amet，是一位杰出的献身者。他是一位杰出的献身者。他是一位杰出的献身者
},
{
id:2，
工作：“开发人员3”，
期间：“2014-2015年”，
描述：“Lorem ipsum Door sit amet，是一位杰出的献身者。他是一位杰出的献身者。他是一位杰出的献身者
}
]
}
]
类应用程序扩展了React.Component{
render（）{
const{data}=this.props；
const resume=data.map（信息=>{
//浏览器渲染
返回(
{info.name}

{
info.experiences.map（experience=>
{experience.job}
）
}

{info.position}
);
});
返回{{resume}
}；
}
}
ReactDOM.render(
,
document.getElementById（'root'）

info.experiences
是一个数组
console.log（info.experiences）
应该向您展示这一点。因此，要访问
job
属性，您必须执行
info.experiences[0].job
或类似的.info.experiences[i].job为什么在
应用程序中获得2
return
渲染？@Sag1v One位于
数据.map
中。它正在将
resume
转换为一个元素数组。在第一次返回后，出现语法错误，关闭了
render
函数。它工作正常，但仍然遇到密钥id问题。是，带“”的字符串已被删除。我使用{experience.id}任何建议。你说的“但仍然遇到关键id问题”是什么意思？什么问题？它在这里工作，但很抱歉不清楚…在按照您的建议更正后，它解决了问题。我可以在第页上看到array.map的数据。同时，browser console.log显示具有唯一ID的警告。-->“proxyConsole.js:54警告：数组或迭代器中的每个子级都应该有一个唯一的“key”属性。它似乎与key={experience.ID}未被重新识别有关。@sirrus React想要一种单独跟踪每个DOM元素的方法，所以你需要一个
键
道具。容易的。只需使用
map
info.experiences.map（（experience，idx）=>
import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
     const {data} = this.props;
      const resume = data.map(info => {

        //console log
        console.log(info.name);
        console.log(info.position);
        console.log(info.experiences);
        console.log(info.experiences.job);

        //browser render
        return (
          <div>
              {info.name}
              <br/>
              {info.position}

           </div>
          )
        });
      });

    return (
      <div>
          {<p>{resume}</p>}
      </div>
    );
  }
}