根据用户输入多次迭代数组并添加新索引答案

【问题标题】：Iterate an array multiple times depending on user input with new index added根据用户输入多次迭代数组并添加新索引
【发布时间】：2021-04-17 13:01:27
【问题描述】：

import React, { useState } from 'react'
const data=["Red","Green","blue","orange","yellow"]

function App() {
  const [count, setCount] = useState(0)
  const [text, setText] = useState([])

  const handleSubmit = (e) => {
    e.preventDefault()
    let amount = parseInt(count)
    if (count <= 0) {
      amount = 1
    }
   //for now hardcoding to show only 5 item
    if (count > 5) {
      amount = 5
    }
    setText(data.slice(0, amount))
  }

  return (
    <section >
      <h3>Generate Fun Ipsum</h3>
      <form  onSubmit={handleSubmit}>
        <label htmlFor='amount'>paragraphs:</label>
        <input
          type='number'
          name='amount'
          id='amount'
          value={count}
          onChange={(e) => setCount(e.target.value)}
        />
        <button  type='submit'>
          generate
        </button>
      </form>
      <article>
        {text.map((item, index) => {
          return <p key={index}>{item}</p>
        })}
      </article>
    </section>
  )
}

export default App

我的查询是如果用户输入值 8 那么我应该再次重申数组并显示 8 个项目

输出应该看起来像 - "红","绿","蓝","橙","黄","红","绿","蓝"

如果用户输入 10，那么输出应该是：

"红","绿","蓝","橙","黄","红","绿","蓝","橙","黄"

如果用户输入 12，那么输出应该是： "红","绿","蓝","橙","黄","红","绿","蓝","橙","黄","红","绿"

我希望我清楚

【问题讨论】：

标签： javascript arrays reactjs react-dom

【解决方案1】：

您可以将简单的 for 循环与模运算符 % 结合使用以获得所需的结果

const data=["Red","Green","blue","orange","yellow"]
const { useState } = React

function App() {
  const [count, setCount] = useState(0)
  const [text, setText] = useState([])

  const handleSubmit = (e) => {
    e.preventDefault()
    let amount = parseInt(count)
    if (count <= 0) {
      amount = 1
    }
   
    const slice = []
    for (let i = 0; i < amount; i++) {
        slice.push(data[i % data.length])
    }
    
    setText(slice)
  }

  return (
    <section >
      <h3>Generate Fun Ipsum</h3>
      <form  onSubmit={handleSubmit}>
        <label htmlFor='amount'>paragraphs:</label>
        <input
          type='number'
          name='amount'
          id='amount'
          value={count}
          onChange={(e) => setCount(e.target.value)}
        />
        <button  type='submit'>
          generate
        </button>
      </form>
      <article>
        {text.map((item, index) => {
          return <p key={index}>{item}</p>
        })}
      </article>
    </section>
  )
}

ReactDOM.render(<App />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>

【讨论】：

【解决方案2】：

你可以试试这样的：

setText(
    Array.from({length: amount}).map((_, i) => data[i % data.length])
)

【讨论】：