时间戳

首页 > 解决方案 > 在Javascript中生成由函数映射返回的两个或多个项目

javascript - 在Javascript中生成由函数映射返回的两个或多个项目

问题描述

我想在一个偶数 div 中渲染两个项目，但是这是使用方法 array.map() 在单个 div 中渲染的。我的代码是：

import React from 'react'
import {useState} from 'react'
function Home() {
const [userName, setUserName] = useState('')
const [userEmail, setUserEmail] = useState('')
const [containerArray, setContainerArray] = useState ([])

function registerUsers () {
    setContainerArray([...containerArray, userName, userEmail])
}

return (
    <div>
        <h1>Register your users and handle them</h1>
        <div id='div1'>
        <div id='div2'>
           <div id='array-div'> {containerArray.map((item)=>{return  <div id='array-div2'><li>{item} 
        </li></div>})}</div>
 </div>)}

导出默认主页

标签： javascriptarraysreactjsdictionary

解决方案

用于返回两个<li></li>具有您独特性的<div></div>. 我们需要首先将我们的 1D 数组转换为 1X2D 数组，以便我们可以一次返回两个项目。

这是实现： https ://codesandbox.io/s/awesome-booth-hyxg5?file=/src/App.js

const arr = [1, 2, 3, 4, 5, 6, 6, 6, 7, 8, 10];
const arr2D = [];
while (arr.length) {
  arr2D.push(arr.splice(0, 2));
}
return arr2D.map(items => {
  const [firstItem = null, secondItem = null] = items;
  return (
    <div>
      {firstItem && <li>{firstItem}</li>}
      {secondItem && <li>{secondItem}</li>}
      <hr />
    </div>
  );
});

现在只需将 替换为arr我们的containerArray.

我希望这个能帮上忙

推荐阅读