我想将下面的 for 循环转换为 array.map() 但不知道如何

Question

OtpInput 是另一个组件，OTPLength 是从父组件获取的道具，是必需的。

{

    const otp = getOtpValue()

    const inputs = []

    for (let index = 0; index < OTPLength; index++) {

      inputs.push(

        <Input

          key={index}

          focus={activeInput === index}

          value={otp[index]}

          onChange={handleOnChange}

          onKeyDown={handleOnKeyDown}

          onInput={handelOnInput}

          onInputFocus={onInputFocus}

          index={index}

          secure={secure}

          invalid={invalid}

          autoFocus={autoFocus}

        />

      )

    }

    return inputs

}

已经尝试并更改了以下方式，但我只得到一个输入，而不是在 OTPLength 中作为道具传递的值，然后用于创建基于 OTPLength 的新数组。

const renderInputs = useMemo(() => {

    const otp = getOtpValue()

    const inputs = new Array(OTPLength)

    return [...inputs].map((_,index) =>

            <Input

                key={index}

                focus={activeInput === index}

                value={otp[index]}

                onChange={handleOnChange}

                onKeyDown={handleOnKeyDown}

                onInput={handelOnInput}

                onInputFocus={onInputFocus}

                index={index}

                secure={secure}

                invalid={invalid}

                autoFocus={autoFocus}

              />

            )

  }, [

    getOtpValue,

    OTPLength,

    activeInput,

    handleOnChange,

    handleOnKeyDown,

    handelOnInput,

    onInputFocus,

    autoFocus,

    invalid,

    secure

  ])

Answer 1

简单地遍历一个空的 Array()，第二个参数是map()指当前索引&nbsp; &nbsp; const myArray = [...new Array(OTPLength)].map((obj, i)=> (&nbsp; &nbsp; &nbsp; <Input&nbsp; &nbsp; &nbsp; &nbsp; key={index}&nbsp; &nbsp; &nbsp; &nbsp; focus={activeInput === i}&nbsp; &nbsp; &nbsp; &nbsp; value={otp[i]}&nbsp; &nbsp; &nbsp; &nbsp; onChange={handleOnChange}&nbsp; &nbsp; &nbsp; &nbsp; onKeyDown={handleOnKeyDown}&nbsp; &nbsp; &nbsp; &nbsp; onInput={handelOnInput}&nbsp; &nbsp; &nbsp; &nbsp; onInputFocus={onInputFocus}&nbsp; &nbsp; &nbsp; &nbsp; index={index}&nbsp; &nbsp; &nbsp; &nbsp; secure={secure}&nbsp; &nbsp; &nbsp; &nbsp; invalid={invalid}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;autoFocus={autoFocus}&nbsp; &nbsp; &nbsp; &nbsp;/>));

Answer 2

你甚至不需要map()，你可以简单地做：const inputs = Array.from({length: OTPLength}, (_,i) =>&nbsp;&nbsp; &nbsp; <Input&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; key={i}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; focus={activeInput == i}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; /* the rest of your props */&nbsp;&nbsp; &nbsp; />)或者，如果您仍然喜欢map()：const inputs = [...Array(OTPLength)].map((_,i) =>&nbsp;&nbsp; &nbsp; <Input&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; key={i}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; focus={activeInput == i}&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; /* the rest of your props */&nbsp;&nbsp; &nbsp; />)

Answer 3

这应该有效，const renderInputs = useMemo(() => {const otp = getOtpValue()const inputs = new Array(OTPLength)let ret = inputs.map((_,index) =>&nbsp; &nbsp; &nbsp; &nbsp; <Input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; focus={activeInput === index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={otp[index]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleOnChange}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onKeyDown={handleOnKeyDown}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onInput={handelOnInput}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onInputFocus={onInputFocus}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; index={index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; secure={secure}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; invalid={invalid}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; autoFocus={autoFocus}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; return ret;&nbsp;}, [getOtpValue,OTPLength,activeInput,handleOnChange,handleOnKeyDown,handelOnInput,onInputFocus,autoFocus,invalid,secure])