Javascript 使用.map（）在reactjs中以两个为一组打印值

我正在尝试渲染一个

，它将在一行中打印两个

到

值。然后在下一个

中输入第三个to值。
所以我的目标是这样的

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


obj
是一种反应状态。我正在使用js中的.map（）函数打印它。但我想两人一组打印。我怎样才能做到这一点

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


moves.map（（move，i）=>{
返回(
{i}
{move}

)
})
首先，必须按顺序迭代
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);
  }

注意：您可以使用
li
而不是
p
标记

结果：


工作演示at.
应该能够执行以下操作：

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

moves.map（（move，i）=>{
返回(
{i}
{`move[i]。要`+move[i+1]？`，请移动[i+1]。要`:''}

)
})

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