如何根據字符串的長度動態修改數組中的值？

Question

我有一個數組

passcodeArray: [null, null, null, null], 

和可變

passcode: '', 

和我想要的陣列的指數表現動態基於密碼

對於實例的長度時，

passcode.length === 2 

passcodeArray: [true, true, true, null], 

當密碼的長度縮短爲1時，陣列需要更新到

passcodeArray: [true, true, null, null], 

這是我迄今所做的，我想了一個辦法，包括我的渲染功能

裏面的一些邏輯

renderPasscodeIndicator() { 
let views = [] 
let passcodeArray = this.state.passcodeArray; 
let passcodeLength = this.state.passcode.length; 

passcodeArray.forEach((item, index) => { 
    views.push(
    { 
     ...passcodeArray[index] === null ? 
     <View key={index} style={[styles.passcodeIndicator]} /> : 
     <View key={index} style={[styles.passcodeIndicator, 
    styles.passcodeEntered]} /> 
     } 
    ) 
    }); 
    return views; 
    } 

Answer 1

答案利奧提供有一定的幫助，但它不會實時更新的陣列。

所以，我決定把我在大學裏學到的知識用得很好。

這是我在一些好時間後得到的。

我使用堆棧的概念，我想要實現的只是比較堆棧長度和循環，以便可以更新視圖。

renderPasscodeIndicator() { 
let views = [] 
let passcodeLength = this.state.passcode.length; 

let localStack = [] 
for (var i=0; i<passcodeLength; i++) { 
    localStack.push('x') 
} 

for (var j=0; j<4; j++) { 
    views.push({ 
    ...localStack.length > j ? 
    <View key={j} style={[styles.passcodeIndicator, styles.passcodeEntered]} /> : 
    <View key={j} style={[styles.passcodeIndicator]} /> 
    }) 
} 

    return views; 
} 

Answer 2

使用Array.fill()和執行passcodeArray.fill(true, 0, passcode.length);

這裏是一個工作示例

const passcode = 'test'; 
 
const passcodeArray = [null, null, null, null, null, null, null]; 
 

 
const result = passcodeArray.fill(true, 0, passcode.length); 
 

 
console.log(result);