javascript - 在react函数中渲染对象数组

Question

请原谅我，我是一个 react 菜鸟。我正在尝试访问 javascript/react 对象内的数据。 json 数据如下所示:

"schoolData": {
      "student": [
        {
          "name": "blah",
          "type": "lorem",
          "grade": 90,
        }
      ],
      "class": null
    },

我想要显示的内容基本上就是这样......

Student
name: Blah      type: lorem      grade:   90
Class
--- no data here ---

所以我尝试这样:

import React, { PropTypes } from 'react';


const SchoolDataPropTypes = {
  SchoolData: PropTypes.object.isRequired,
};

function School(props) {

    return (
    <div className="section">
        <h3 className="head">School Data</h3>
        <div className="row">

            <ul className="Uli">
                {(props.data || []).map(function(value) {
                    return <label>{props.data.key}</label><li key={value}>{key}: {value}</li>
                })}
            </ul>
        </div>
    </div>
  );
}
School.propTypes = SchoolPropTypes;

export default School;

这显然行不通。这样我就可以渲染对象内的每个数组？

Answer 1

理想情况下，您可以手动指定每个键。

{(schoolData.student || []).map(student => (
  <ul className="Uli">
    <li>Name: {student.name}</li>
    <li>Grade: {student.grade}</li>
  </ul>
))}

等等...

但是，如果您确实想循环访问学生对象中的变量键，那么基本上您需要循环访问学生数组，然后循环访问每个学生对象中的键。它可能如下所示:

const School = ({ schoolData }) => (
  <div className="section">
    <h3 className="head">School Data</h3>
    <div className="row">
      {(schoolData.student || []).map(student => (
        <ul className="Uli">
          {Object.keys(student).map(key => (
            <li key={key}>{key}: {student[key]}</li>
          ))}
        </ul>
      ))}
    </div>
  </div>
);

-

<School schoolData={schoolData} />

如果您的目标是非常非常旧的浏览器，您可能需要 Object.keys