我想將下面的 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

你甚至不需要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 2

簡單地遍歷一個空的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 3

下面的代碼創建一個與 OTPLength 大小相同的數組並返回一個 Input 元素數組

let otpArray = new Array(OTPLength);
return [...otpArray].map((element, 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}
   />
))

Answer 4

這應該工作，

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
])