Question

如何在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;

Answer 1

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

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

然后在你的渲染功能

中

<tbody>
  {tableData}
</tbody>

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

Answer 2

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

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 3

问题是您的obj变量本地作用于for循环，因此当您尝试访问obj.domain时，例如在JSX中，obj结算未定义。

我想你想为JSON中的每个项目显示一个新的<tr>，你可以使用Javascript＆＃39; s .map：

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

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

请阅读有关Lists and Keys的React的文档，以熟悉React中广泛使用的map()的使用情况，以及唯一key的重要性每个元素。

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

循环遍历表数据React JS

3 个答案: