Wie ändert man die Werte innerhalb eines Arrays dynamisch nach der Länge eines Strings?

Question

Ich habe ein Array

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

und eine variable

passcode: '', 

und ich den Index des Arrays wollen dynamisch von der Länge der Passcode

Zum Beispiel basiert verhalten, wenn

passcode.length === 2 

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

Wenn die Länge des Passcodes auf 1 reduziert wird, muss das Array

aktualisiert wird

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

Das ist, was ich bisher getan habe, ich bin eine Art und Weise zu denken einig Logik in meiner Render-Funktion integrieren

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

Die Antwort leo zur Verfügung gestellt hatte sicherlich hilfreich, aber es ist nicht das Array in Echtzeit aktualisieren.

Also, ich habe mich entschieden, das Wissen, das ich an meiner Universität erworben habe, gut zu nutzen.

Das habe ich nach ein paar guten Stunden bekommen.

Ich benutze das Konzept des Stapels und das alles, was ich erreichen will, vergleicht nur die Stapellänge und eine Schleife, damit die Ansicht aktualisiert werden konnte.

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

Verwenden Array.fill() und führen passcodeArray.fill(true, 0, passcode.length);

Hier ist ein funktionierendes Beispiel

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

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

 
console.log(result);