循环遍历表数据 React JS

IT技术 reactjs
2021-05-24 08:07:23

如何在 React JS 中循环本地 JSON 数据并返回 td 标签内的数据？

来自 JSON 文件的示例：

[
{
    "organize": true,
    "sender": "Dach Group",
    "domain": "godfrey.name",
    "email": "Mercedes.OKon@gmail.com",
    "folder": "Business"
},
{
    "organize": true,
    "sender": "Bernhard and Sons",
    "domain": "torey.net",
    "email": "Zack45@yahoo.com",
    "folder": "Home"
},
{
}

控制台日志正在记录所有数据，因此它肯定会使用 for 循环抓取和显示数据。 

 import React, { Component } from 'react';
 import './TableHeader.css';
 import localdata from './data';

class TableHeader extends Component {
   render() {

   for(var i = 0; i < localdata.length; i++) {
   var obj = localdata[i];

   console.log(obj.organize + ", " + obj.sender + ", " + obj.domain + ", " + obj.email + ", " + obj.folder);
   }

return (
  <div className="container">

    <table className="table">
      <thead>
        <tr>
            <th style={{height: '50px'}}>Organize</th>
            <th style={{height: '50px'}}>Sender</th>
            <th style={{height: '50px'}}>Domain</th>
            <th style={{height: '50px'}}>Email</th>
            <th style={{height: '50px'}}>Folder</th>
        </tr>
      </thead>

      <tbody>
        <tr>
            <td>
              <input type="checkbox" name="" value="" />
            </td>

            <td style={{backgroundColor: 'white'}}>
              {obj.sender}
            </td>


            <td style={{backgroundColor: 'white'}}>{obj.domain}</td>
            <td style={{backgroundColor: 'white'}}>{obj.email}</td>
            <td style={{backgroundColor: 'white'}} className="bordercolor">
              <select style={{height: '30px', width: '100%'}}>
                <option>Travel</option>
                <option>Shopping</option>
                <option>Finance</option>
              </select>
            </td>
        </tr>
      </tbody>

    </table>
  </div>
);
}
}

export default TableHeader;
3个回答

使用 map 是一种有效的方法： 

var tableData = localdata.map(function(obj) {
 return <tr><td>{obj.organizer}</td><td>{obj.sender}</td></tr>
}

然后在你的渲染函数中

<tbody>
  {tableData}
</tbody>

虽然，更简洁的实现是将行拉入其自己的组件中，该组件接受一个对象并返回一行，然后您的地图只需将“obj”传递到该组件中，它就会返回和填充的。

您也应该将渲染逻辑置于循环中。我用你的数据做了一个例子

class HelloWorld extends React.Component {
  render() {
    const data = [
      {
          "organize": true,
          "sender": "Dach Group",
          "domain": "godfrey.name",
          "email": "Mercedes.OKon@gmail.com",
          "folder": "Business"
      },
      {
          "organize": true,
          "sender": "Bernhard and Sons",
          "domain": "torey.net",
          "email": "Zack45@yahoo.com",
          "folder": "Home"
      },
    ];

    return (
      <div>
         <table className="table">
          <thead>
            <tr>
                <th style={{height: '50px'}}>Organize</th>
                <th style={{height: '50px'}}>Sender</th>
                <th style={{height: '50px'}}>Domain</th>
                <th style={{height: '50px'}}>Email</th>
                <th style={{height: '50px'}}>Folder</th>
            </tr>
          </thead>
          <tbody>
            {data.map(obj => {
              return (
                <tr>
                  <td>
                    <input type="checkbox" name="" value="" />
                  </td>
                  <td style={{backgroundColor: 'white'}}>
                    {obj.sender}
                  </td>
                  <td style={{backgroundColor: 'white'}}>{obj.domain}</td>
                  <td style={{backgroundColor: 'white'}}>{obj.email}</td>
                  <td style={{backgroundColor: 'white'}} className="bordercolor">
                    <select style={{height: '30px', width: '100%'}}>
                      <option>Travel</option>
                      <option>Shopping</option>
                      <option>Finance</option>
                    </select>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}
ReactDOM.render(<HelloWorld />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

问题是您的obj变量在本地范围内限定为for循环，因此当您尝试访问obj.domain例如在 JSX 中时，obj解析为未定义。

我想你想为<tr>JSON 中的每个项目显示一个新的，你可以用 Javascript 来做.map：

<tbody>
  { localdata.map(obj => {
      return (
        <tr key={ obj.domain }>
          <td>{ obj.domain }</td>
        </tr>
       );
     }) 
  }
</tbody>

请注意，如果key映射数组中的顶层 React 元素没有prop，React 将抛出警告，指出数组中的所有项目都必须具有唯一键。

请阅读 React 关于Lists and Keys的文档，以习惯map()React 中广泛使用的用法，以及 unique keys 对于每个元素的重要性。

我还推荐阅读React.js 和 Dynamic Children - Why the Keys are important，其中展示了一个隐藏错误的示例，当您的用例变得更复杂时，这些错误可能会出现。

其它你可能感兴趣的问题
上一篇为什么nodejs实例在谷歌应用引擎标准环境下无法成功启动？ 下一篇错误处理 redux-promise-middleware