迭代 zip iterable 以在 table 中生成多行 - Reactjs

Question

我有一个数组数据库，我想将其解压并插入 table。

例如，我将有一个名为 a=[1,2,3,4] 和 b=['a','b','c','d'] 的数组，每个数组的长度都相等。

我将有一个 table 只有 headers

a	b

我生成的数组是 [[1,'a'],[2,'b'],[3,'c'],[4,'d']] 使用 underscore 包中的 zip 函数创建。

我的目标是迭代这个数组并生成以下内容

a	b
1	'a'
2	'b'
3	'c'
4	'd'

此刻，我有一个

function returnIt(){
        let _ = require('underscore')
        //returns [[1,'a'],[2,'b'],[3,'c'],[4,'d']] so x[0] = 1 and x[1] = 'a'
        for (var x of _.zip([1,2,3,4],['a','b','c','d'])){
            return (
                <>
                    <td>
                        {x[0]}
                    </td>
                    <td>
                        {x[1]}
                    </td>
                </>
            )
        }
return(
    <table>
        <thead>
            <tr>
                <th>a</th>
                <th>b</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                {returnIt()}
            </tr>
        </tbody>
    </table>
)

但这不起作用。我得到

如你所见，我只得到一行，代码不会产生超过一行！抱歉 headers，我已经尽可能多地更改我的程序以适应您的眼睛。

无论如何，这是我的结果，我能改变什么？

Answer 1

假设这是使用 React

<td> 应该是 <tr>

的直系后代

Answer 2

问题是您 return 来自循环体。所以它只会到达第一个元素。

for (anything) {
   return ...
}

总是会立即return而不继续循环，无论括号之间是什么。

您需要让循环一次建立 HTML 和 return 所有行，或者可以使用生成器函数之类的东西并在 [= 的地方添加一个循环23=]调用函数。

假设您使用的框架只允许 return 不加引号 HTML，那么 return 值的 table 部分的问题可能是你不能在 <tr> 和其中一个包含的 <td> 之间有一个 <div>。

Answer 3

在 returnIt 中，您的 for 循环 return 在代码块中，因此它只会运行一次，并且 return 您的第一对数组元素转换为 html 个元素。尝试 return 将压缩元素映射到标记片段。然后你就会看到它们。

这是一个完整的例子：

import _ from "underscore";

export default function App() {
 
  return(
  <table>
      <thead>
          <tr>
              <th>a</th>
              <th>b</th>
          </tr>
      </thead>
      <tbody>
          
              {returnIt()}

      </tbody>
  </table>)

}

function returnIt(){
  //returns [[1,'a'],[2,'b'],[3,'c'],[4,'d']] so x[0] = 1 and x[1] = 'a'
  let zipped = _.zip([1,2,3,4],['a','b','c','d'])
  return zipped.map(pair => {
      return (
          <tr>
              <td>
                  {pair[0]}
              </td>
              <td>
                  {pair[1]}
              </td>
          </tr>
      )
  })
}

迭代 zip iterable 以在 table 中生成多行 - Reactjs

iterate over zip iterable to produce multiple rows in table - Reactjs

html

javascript

html-table

reactjs