迭代 zip 可迭代以在表中生成多行 - Reactjs

Question

我有一个数组数据库，我想解压并插入到表中。

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

我会有一个只有标题的表格

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

但这不起作用。我明白了

---

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

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

Answer 1

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

这是一个完整的例子：

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

Answer 2

假设这是使用 React

return (
                <>
                    <td>
                        {x[0]}
                    </td>
                    <td>
                        {x[1]}
                    </td>
                </>
            )

<td> 应该是<tr> 的直系后代

Answer 3

问题是你从循环体返回。所以它只会到达第一个元素。

for (anything) {
   return ...
}

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

您需要让循环构建 HTML 并一次返回所有行，或者可能使用生成器函数之类的东西并将循环添加到 调用该函数的位置。

假设您使用的框架允许您只使用 return 这样的未引用 HTML，那么返回值的表格部分的问题可能是您不能在 <tr> 和其随附的<td>s 之一。