Question

忍受我，我不善言辞，在这里，我会尽力解释我在数组中映射嵌套数据的问题，我猜这个术语会被称为＆＃34;抓取来自本地API的数据与ReactJS＆＃34;下面的代码是data.js中的数据＆＃34;本地API＆＃34;

    export default[
    {
        name: "John Doe",
        position: "developer",
        experiences: [
            {   
                id: 0,
                job:"developer 1",
                period: "2016-2017",
                description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt recusandae unde. Qui consequatur beatae, aspernatur placeat sapiente non est!" 
            },
            {
                id: 1,
                job:"developer 2",
                period: "2015-2016",
                description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt recusandae unde. Qui consequatur beatae, aspernatur placeat sapiente non est!" 
            },
            {
                id: 2,
                job:"developer 3",
                period: "2014-2015",
                description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt recusandae unde. Qui consequatur beatae, aspernatur placeat sapiente non est!" 
            }

        ]

    }
]

下面的代码显示了两个组件文件：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'));

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

到目前为止，我能够从浏览器console.log中获取确认的数据，并将两个数据info.name呈现为 John Doe ，并将info.position呈现为开发人员没有问题。

现在，如果我在{info.position}下面添加了这个字符串<li key="experience.id">{info.experiences.job}</li>，我将收到错误消息。

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

我认为，我设置数组的方式不正确。但是info.experiences的console.log显示了（3）经验数组的结果。但控制台登录info.experiences.job显示未定义。然而，我无法弄清楚问题是什么，可能出现什么问题？

我花了两天时间试图寻找解决方案而且我没有得到任何好运。

有什么建议吗？

Answer 1

你有几件事需要解决：

您的render函数中出现语法错误，第一个 return你关闭了render函数体，因此你不能到达第二个return（它甚至不应该渲染并抛出一个误差）。
您正在尝试引用密钥中的对象？你用了一个字符串。无论如何，密钥对于他们的兄弟姐妹DOCS应该是唯一的。

<li key="experience.id">{info.experiences.job}</li>
这应该是（但是你的马还没有完成！）：

<li key={experience.id}>{info.experiences.job}</li>
experience未定义，我猜你想循环 experiences数组：

info.experiences.map(experience => <li key={experience.id}>{experience.job}</li>)

无论如何，这是一个运行和工作的例子：

const data = [
  {
    name: "John Doe",
    position: "developer",
    experiences: [
      {
        id: 0,
        job: "developer 1",
        period: "2016-2017",
        description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt recusandae unde. Qui consequatur beatae, aspernatur placeat sapiente non est!"
      },
      {
        id: 1,
        job: "developer 2",
        period: "2015-2016",
        description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt recusandae unde. Qui consequatur beatae, aspernatur placeat sapiente non est!"
      },
      {
        id: 2,
        job: "developer 3",
        period: "2014-2015",
        description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt recusandae unde. Qui consequatur beatae, aspernatur placeat sapiente non est!"
      }

    ]

  }
]


class App extends React.Component {
  render() {
    const { data } = this.props;
    const resume = data.map(info => {
      //browser render
      return (
        <div>
          {info.name}
          <ul>
          {
            info.experiences.map(experience => <li key={experience.id}>{experience.job}</li>)
          }
          </ul>
          {info.position}
        </div>
      );
    });

    return <div>{<p>{resume}</p>}</div>;
  }
}

ReactDOM.render(
  <App data={data} />,
  document.getElementById('root'));

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

修改
作为您的评论的后续内容：

除了我尝试分配它之外，我几乎从未遇到任何错误   在嵌套数组

与render的{{1}}方法中的代码一样：

App.js

你有两个问题：

在第一次循环迭代中，您应该将一个键传递给根元素as 好吧，不仅仅是第二个循环。

render() { // console.log(this.props.name) const {data} = this.props; const resume = data.map((info) => { return ( <div> {info.name} {info.experiences.map((experience, idx)=> <div > <div key={experience.id} >{experience.job}</div> </div>)} {info.position} </div> ) });

在第二个循环中，您将密钥传递给子元素而不是这个循环的父元素：

const resume = data.map((info, key) => { return ( <div key={key}> {info.name} // ...

键应位于根元素而不是第二个元素：

{info.experiences.map((experience, idx)=> <div > <div key={experience.id} >{experience.job}</div> </div>)}

工作示例：

{info.experiences.map((experience, idx) => <div key={experience.id}> <div>{experience.job}</div> </div>)}

const data = [ { id: "resume", name: "John Doe", position: "developer", experiences: [ { id: 0, job: "developer 1", period: "2016-2017", description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt recusandae unde. Qui consequatur beatae, aspernatur placeat sapiente non est!" }, { id: 1, job: "developer 2", period: "2015-2016", description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt recusandae unde. Qui consequatur beatae, aspernatur placeat sapiente non est!" }, { id: 2, job: "developer 3", period: "2014-2015", description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium nesciunt recusandae unde. Qui consequatur beatae, aspernatur placeat sapiente non est!" } ] } ] class App extends React.Component { render() { // console.log(this.props.name) const { data } = this.props; const resume = data.map((info, i) => { return ( <div key={i}> {info.name} {info.experiences.map((experience, idx) => <div key={experience.id}> <div>{experience.job}</div> </div>)} {info.position} </div> ) }); return ( <div> {resume} </div> ); } } ReactDOM.render(<App data={data} />, document.getElementById('root'));

<强>奖金
至于这个评论：


我会使用codepen，但是要意识到但是不可能创建它   两个文件，即index.js和App.js

你可以使用code sandbox这对做出反应非常有用以下是一个工作示例，您的代码位于单独的文件link中。

如何从JSON映射嵌套数组？

1 个答案: