我想将下面的 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()指当前索引

    const myArray = [...new Array(OTPLength)].map((obj, i)=> (

      <Input

        key={index}

        focus={activeInput === i}

        value={otp[i]}

        onChange={handleOnChange}

        onKeyDown={handleOnKeyDown}

        onInput={handelOnInput}

        onInputFocus={onInputFocus}

        index={index}

        secure={secure}

        invalid={invalid}

         autoFocus={autoFocus}

       />

));

Answer 2

你甚至不需要map()，你可以简单地做：

const inputs = Array.from({length: OTPLength}, (_,i) => 

    <Input 

        key={i} 

        focus={activeInput == i} 

        /* the rest of your props */ 

    />

)

或者，如果您仍然喜欢map()：

const inputs = [...Array(OTPLength)].map((_,i) => 

    <Input 

        key={i} 

        focus={activeInput == i} 

        /* the rest of your props */ 

    />

)

Answer 3

这应该有效，

const renderInputs = useMemo(() => {

const otp = getOtpValue()

const inputs = new Array(OTPLength)

let ret = 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}

          />

        );

        return ret;

 }, [

getOtpValue,

OTPLength,

activeInput,

handleOnChange,

handleOnKeyDown,

handelOnInput,

onInputFocus,

autoFocus,

invalid,

secure

])