使用 .map() 在 reactjs 中打印两个一组的值答案

【问题标题】：Print the values in group of two in reactjs using .map()使用 .map() 在 reactjs 中打印两个一组的值
【发布时间】：2021-07-08 12:28:21
【问题描述】：

我正在尝试渲染一个<li>，它将在一行中打印两个to 值。然后第三个值在下一个<li> 中。所以我的对象是这样的。

let obj = [ 
{from : 'a1' , to : 'a7'},
{from : 'b1' , to : 'b7',
{from : 'c4' , to : 'c27'},
{from : 'a1' , to : 'a9'},
{from : 'j1' , to : 'a10'}
]

我想像这样输出它

1. a7 , b7
2. c27, a9
3.  a10

The obj 是一个反应状态。我正在使用 js 中的 .map() 函数打印它。但我希望它成对打印两个。我怎样才能做到这一点。

moves.map((move, i) => {
                            return (
                                <li key={i}>{i}
                                    {move}
                                </li>
                            )
                        })

【问题讨论】：

标签： javascript reactjs ecmascript-6 array.prototype.map

【解决方案1】：

首先，您必须逐一迭代您的 obj 变量。

const moves = [];

  for (let i = 0; i < obj.length; i += 2) {
    let move = obj[i].to;
    if (i + 1 < obj.length) {
      move += ", " + obj[i + 1].to;
    }
    moves.push(move);
  }

然后，您可以简单地迭代新创建的moves 变量。

{moves.map((move, i) => {
        return (
          <p key={i}>
            {i + 1}. {move}
          </p>
        );
      })}

注意：您可以使用li 代替p 标签。

结果：

工作演示CodeSandbox。

【讨论】：

【解决方案2】：

应该可以做这样的事情：

moves.map((move, i) => {
    return (
        <li key={i}>{i}
            {`move[i].to` + move[i+1] ? `, move[i+1].to` :''}
        </li>
    )
})

【讨论】：