Question

我试图在对象中的每个数组中返回数据。

这是我的Json：

 "student_clubs": { // brought in as object
      "art": { // object
        "illustration": ["Done"], // Array
        "design": ["Done"] // Array
      },
      "sports": { // object 
        "Basketball": ["Incomplete"], // Array
        "Hockey": ["Done"]  // Array
      }
    },

我试图像这样显示它：

art:
illustration: done       design: done

sports:
Basketball: Incomplete   Hockey: Done

我的jsx：

import React, { PropTypes } from 'react';


const ClubsPropTypes = {
    student_clubs: PropTypes.object.isRequired,
    student_grades: PropTypes.object.isRequired,
};

class Clubs extends React.Component {


  render() {
    const StudentClubs = this.props.student_clubs;
    const Grades = this.props.grades;


    return (
      <div className="">
            {(StudentClubs.art || []).map(art => (
                    <div className="row">
                        <ul>
                            <p>art</p>
                            <li>illustration: {art.illustration}</li>
                            <li>design: {art.design}</li>
                        </ul>
                    </div>
                ))}
            ... same code for sports (seems repetitive)
      </div>
    );
  }
}

Clubs.propTypes = ClubsPropTypes;

module.exports = Clubs;

现在我得到了Uncaught TypeError: (StudentClubs.art || []).map is not a function。这是为什么？我怎样才能解决这个问题？还有更好的方法来循环这些对象吗？：\

Answer 1

StudentClubs.art是一个对象，因此您无法将其与地图一起使用。

您可以使用Object.keys()循环对象，该对象返回对象键的数组，请参阅：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

您可以遍历对象键，如：

Object.keys(myobject).map((key) => {
   // do stuff with myobject[key]
})

或使用in，请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

例如：

for (let key in myobject) {
  if (myobject.hasOwnProperty(key)) {
    // do stuff with myobject[key]
  }
}

那么你可以循环不同的俱乐部，并为每个俱乐部循环他们的键 - 显示键名和值列表（例如“完成”）。

如果可以，请调整您的JSON，以便student_clubs是一个对象数组，每个对象都是一个包含子类别字符串和状态字符串的对象数组。你不需要一个Done / Incomplete数组。

Answer 2

在你的json art属性中不是数组，是一个对象，而对象没有map函数我不明白为什么你可能想要一个数组来指定子属性（运动或艺术）的状态。我会这样做：

"student_clubs": [{
  "art":[
    {
      "discipline":"illustration",
      "status: "Done"
    },
    {
      "discipline:"Design",
      "status":"Done"
    }
  ],
  "sports":[
    {
      "discipline":"Basketball",
      "status":"Incomplete"
    },
    {
      "discipline":"Hockey",
      "status":"whatever"
    }  
  ]
]}

所以现在你可以通过每个俱乐部进行映射，并且在每个俱乐部内你可以通过每个俱乐部来映射＃34;纪律＆＃34;并且以我认为更容易的方式做任何你想做的事。

访问和返回对象内的对象数组时键入错误

2 个答案: