无法循环表格中的表格行？答案

【问题标题】：Not able to loop table rows in the table?无法循环表格中的表格行？
【发布时间】：2018-05-24 12:03:09
【问题描述】：

let tableclientnamelist  = [];
        for(var i=0; i<tablecontractlist.length;i++){
            tableclientnamelist.push(
               <tr>
                   <td>
                      {tableclientname[i]}
                   </td>
               </tr>
            )
         }

    let tablecreatedbylist  = [];
        for(var i=0; i<tablecontractlist.length;i++){
            tablecreatedbylist.push(
               <tr>
                   <td>
                      {tablecreatedby[i]}
                   </td>
               </tr>
            )
         }

         let tablecontractvaluelist  = [];
        for(var i=0; i<tablecontractlist.length;i++){
            tablecontractvaluelist.push(
               <tr>
                   <td>
                      {tablecontractvalue[i]}
                   </td>
               </tr>
            )
         }

         let tablecreatedDatelist  = [];
        for(var i=0; i<tablecontractlist.length;i++){
            tablecreatedDatelist.push(
               <tr>
                   <td>
                      {tablecreatedDate[i]}
                   </td>
               </tr>
            )
         }  


          <table id="customers">
                                        <thead>
                                            <tr>
                                                <td>Client Name</td>
                                                 <td>Created By</td>
                                                  <td>Contract Value</td>
                                                   <td>Created Date</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {tableclientnamelist}
                                            {tablecreatedbylist}
                                            {tablecontractvaluelist}
                                            {tablecreatedDatelist}




                                        </tbody>
                                    </table>

image result

我有一个表，我需要基于数组名称的表行。显示错误，我可以知道这个或任何其他方式有什么问题需要实现

在插入所有内容后，我已经更新了更改而不是进入 4 个不同的列，因为我有 4 个不同的 tds

【问题讨论】：

你能显示任何错误信息吗？或者您的列表可能是空的。我认为 <td> 应该在 for 循环中。
我有长度为 15 的 tablecontractlist

标签： html reactjs html-table

【解决方案1】：

请改用.map。

从

更改表数据

<td>{for(var i=0; i<tablecontractlist.length;i++){
                tableclientname[i]
            }}</td>

到

{
  tablecontractlist.map((table, i) => {
    return (                
       <tr key={i}>
         <td>{tableclientname[i]}</td>
         <td>{tablecreatedby[i]}</td>
         <td>{tablecontractvalue[i]}</td>
         <td>{tablecreatedDate[i]}</td>
      </tr>
    )    
 })
}

【讨论】：

这里也一样，因为我有 4 个 tds，所以我将所有值放在一个列中而不是 4 列中
@sivasai081 那是因为你做错了。了解您的数据使用情况以正确的方式进行。请参阅上面的更新。它应该工作

【解决方案2】：

在你的render():

let list  = [];
for(let i=0; i<tablecontractlist.length;i++){
    list.push(
       <tr key={i}>
           <td>
              { tableclientname[i] }
           </td>
       </tr>
    )
 }

然后，在你的returntbody：

 <tbody>
      { list }
 </tbody>

【讨论】：

我已经更新了最新的代码，你可以检查一下我是否在一个信号列中获取了所有 tds 我有 4 个 tds 它应该根据标题显示在 4 个列中
所以，它工作了，现在你有新问题了吗？请截屏你的麻烦...
我已附上问题
我得到所有列的地方导致单列而不是 4 个不同的列
循环一次并推送更多<td></td>而不是创建4个数组

【解决方案3】：

在 tbody 中，您只是在显示没有相应 tds 的值...仅供参考...我已经为合同价值和创建日期添加了相同的列表，如果如果您想知道为什么它显示相同的值。

Sample code:

 state = {
 clientList: [{name: 'abc'}, {name: 'def'}],
 createdDateList: [{name: '01/02/2001'}, {name: '01/02/2010'}]

}

render methods for list:

const renderClientList = clientList.map((value, key) => {
            return <tr>
            <td>
               {value.name}
            </td>
        </tr>
        });

        const renderCreatedDateList = createdDateList.map((value, key) => {
            return <tr>
            <td>
               {value.name}
            </td>
        </tr>
        });


<table id="customers">
                                        <thead>
                                            <tr>
                                                <td>Client Name</td>
                                                 <td>Created By</td>
                                                  <td>Contract Value</td>
                                                   <td>Created Date</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <td>{renderClientList}</td>
                                            <td>{renderCreatedDateList}</td>
                                            <td>{renderClientList}</td>
                                            <td>{renderClientList}</td>




                                        </tbody>
                                    </table>

希望这会有所帮助 :).. 请检查 renderClientList 的放置方式，我也使用了 map :D

【讨论】：