在react函数中渲染对象数组

Render object arrays in react function

本文关键字：对象 数组 react 函数      更新时间：2023-09-26

原谅我，我是个反应迟钝的人。我正在尝试访问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;

它显然不起作用。这样我就可以渲染对象内部的每个数组了？

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

{(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 的polyfill

相关文章：