时间戳

首页 > 解决方案 > ReactJs 渲染对象的值（对象数组）

javascript - ReactJs 渲染对象的值（对象数组）

问题描述

{
    "pendingShareholder": [
        [{
                "id": 5351,
                "userName": "iverson",
                "firstName": "Allen",
                "lastName": "Iverson",
                "password": "$2a$10$20ILdapdX6u8G1nH2jIr6upiKY04LCxD9yjHKUHRhUfpuG1w1ywd2",
                "contact": "97801671",
                "email": "john.doe@gmail.com",
                "roles": [{
                    "id": 3,
                    "name": "ROLE_SHAREHOLDER"
                }]
            },
            {
                "id": 5951,
                "userName": "rosgeller",
                "firstName": "Ros",
                "lastName": "Geller",
                "password": "$2a$10$Udrju2Tj6mKGJRZA3d2GFer6kfSI988xI1/R50s.XmrHcIN1IJxoO",
                "contact": "90908899",
                "email": "peter.sou@gmail.com",
                "roles": [{
                    "id": 3,
                    "name": "ROLE_SHAREHOLDER"
                }]
            }
        ]
    ]
}

大家好

我有上面的对象。如您所见，它是一个对象，具有一个键（“pendingShareholder”）。这个键的值是一个数组内的一个数组（里面有对象）。

我需要在 ReactJS 中返回它。在这里使用 React Hooks。无论如何我似乎都做不到:(任何人都可以帮助我。我要疯了

提前致谢！

const adminStateObject = useSelector((state) => state.admin11111);`

return (
    <div className="adminmaincontent">
      <h2>Pending Approval Users</h2>
      <Table striped bordered hover size="sm" responsive>
        <thead>
          <tr>
            <th>ID</th>
            <th>UserName</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Contact</th>
            <th>Email</th>
            <th>Action</th>
          </tr>
        </thead>
        {Object.keys(adminStateObject).map((key, i) => (
          <tbody key={uuid()}>
            {adminStateObject[key].map((key2, i2) => (
              <tr key={uuid()}>
                <td key={uuid()}>{key2.id}</td>
                <td key={uuid()}>{key2.userName}</td>
                <td key={uuid()}>{key2.firstName}</td>
                <td key={uuid()}>{key2.lastName}</td>
                <td key={uuid()}>{key2.contact}</td>
                <td key={uuid()}>{key2.email}</td>
              </tr>
            ))}
          </tbody>
        ))}
      </Table>
    </div>
  );

标签： javascriptjsonreactjsecmascript-6react-hooks

解决方案

map看起来您正在进行的操作太多。您需要一个迭代嵌套数组的方法。

正如 Gulam 在他们的评论中提到的那样，在每个tbody,tr和上使用 uuidtd是矫枉过正的。只需添加对象 id 作为行键。

function Example({ data }) {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>UserName</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Contact</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {data.pendingShareholder[0].map(obj => (
          <tr key={obj.id}>
            <td>{obj.id}</td>
            <td>{obj.userName}</td>
            <td>{obj.firstName}</td>
            <td>{obj.lastName}</td>
            <td>{obj.contact}</td>
            <td>{obj.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

const data = {pendingShareholder:[[{id:5351,userName:"iverson",firstName:"Allen",lastName:"Iverson",password:"$2a$10$20ILdapdX6u8G1nH2jIr6upiKY04LCxD9yjHKUHRhUfpuG1w1ywd2",contact:"97801671",email:"john.doe@gmail.com",roles:[{id:3,name:"ROLE_SHAREHOLDER"}]},{id:5951,userName:"rosgeller",firstName:"Ros",lastName:"Geller",password:"$2a$10$Udrju2Tj6mKGJRZA3d2GFer6kfSI988xI1/R50s.XmrHcIN1IJxoO",contact:"90908899",email:"peter.sou@gmail.com",roles:[{id:3,name:"ROLE_SHAREHOLDER"}]}]]};

// Render it
ReactDOM.render(
  <Example data={data} />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

推荐阅读