Question

我正在尝试使用嵌套地图，但出现了未定义的错误。

因此，我将profile道具传递到navbar.jsx Link中的profile: this.state.profile路由器。然后，我要在profilePage.jsx中获取数据，并在其中将数据传递到元素中。

个人资料json具有3个组成部分->经验，教育和技能。因此，我需要一个嵌套循环，以使数据显示在元素中。例如;调用`{experience.company}，以便显示公司名称。

当我调用配置文件页面时，在控制台中我看到profile.experience被调用，但随后变得不确定：

(3) [{...}, {...}, {...}] "passing"

undefined "passing"

我尝试了不同的方法，拆分了json组件，但仍然遇到相同的错误。我知道这是映射问题，但是我不确定是否丢失了某些内容，也许是在React中；是React的新功能，因此我可以通过错误来尽可能多地学习。您的帮助将不胜感激！

最终，我希望个人资料页面看起来像这样：

Education
  Company A
  August 2016 - present
  salesman

  Company B
  Feb 2016 - August 2016
  developer

  Company C
  August 2012 - October 2015
  clerk

Education
  school A
  fall 2015
  mathematics

  school B
  may 2008
  business

Skills
  tools: html, css, js, sql

profilePage.jsx

import React, { Component } from "react";
import ProfileItem from "./profileItem"

class Profile extends Component {

    render(){

        // let profile = this.props.location.profile.map((experience) => <li>{experience.experience}</li>);
        // console.log(profile);


        const experience = this.props.location.profile.map((profile,idx) => {
            console.log(profile.experience, 'passing');
            return profile.experience.map((experience,idx) => 
                <div>
                    <p key={idx}>{experience.company}</p>
                </div>
            );
        });

    }
}

export default Profile;

navbar.jsx

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Navbar extends Component {


    constructor(props){
        super(props);
        this.state = {
            profile: [
                {'experience': [
                    {
                        'company': 'company A',
                        'date': 'August 2016 - Present',
                        'jobTitle': 'salesman'
                    },
                    {
                        'company': 'company B',
                        'date': 'February 2016 - August 2016',
                        'jobTitle': 'Developer'
                    },
                    {
                        'company': 'company C',
                        'date': 'August 2012 - October 2015',
                        'jobTitle': 'clerk'
                    }
                ]},
                {'education': [
                    {
                        'school': 'shcool A',
                        'date': 'Fall 2015',
                        'degree': 'mathematics'
                    },
                    {
                        'school': 'school B',
                        'date': 'May 2008',
                        'degree': 'business'
                    }
                ]},
                {'skills': [
                    {
                        'Tools': 'HTML, CSS, Javascript, SQL, Python'
                    }
                ]}
            ],
            experience: [],
            education: [],
            skills: []
        };
    }

    render(){
        return (

            <div className="navFrame">
                <Link to="/">
                    <div className="topNav"><div className="navBar"><h3>name</h3></div></div>
                </Link>

                <Link to="/projects">
                    <div className="rightNav"><div className="navBar"><h3>Projects</h3></div></div>
                </Link>

                <Link to="/contact">
                    <div className="bottomNav"><div className="navBar"><h3>Contact</h3></div></div>
                </Link>

                <Link to={{pathname: '/profile', profile: this.state.profile}}>
                    <div className="leftNav"><div className="navBar"><h3>Profile</h3></div></div>
                </Link>
            </div>

        );
    }
}

export default Navbar;

Answer 1

尝试在浏览器的控制台上运行它=> 从给定的Json：

<div class="example"></div>

当我们尝试运行#h1_div h1 { color: white; }时，它将遍历此数组中存在的所有元素

var response = {profile: [ {'experience': [ { 'company': 'company A', 'date': 'August 2016 - Present', 'jobTitle': 'salesman' }, { 'company': 'company B', 'date': 'February 2016 - August 2016', 'jobTitle': 'Developer' }, { 'company': 'company C', 'date': 'August 2012 - October 2015', 'jobTitle': 'clerk' } ]}, {'education': [ { 'school': 'shcool A', 'date': 'Fall 2015', 'degree': 'mathematics' }, { 'school': 'school B', 'date': 'May 2008', 'degree': 'business' } ]}, {'skills': [ { 'Tools': 'HTML, CSS, Javascript, SQL, Python' } ]} ], experience: [], education: [], skills: [] }将提供3个元素，即经验，教育和技能

当您第一次在该元素上进行迭代时，现在位于代码的内部块中，您将获得定义的体验键，但是在接下来的两次迭代中，由于不存在该键，它将失败。您可以在下面的操作之间添加过滤器！

response.profile.map()

希望这会有所帮助！

ReactJS-带有地图js的嵌套循环

1 个答案: