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

使用Array.fill()并执行passcodeArray.fill(true, 0, passcode.length);

这是一个工作示例

＆＃13;

const passcode = 'test';
const passcodeArray = [null, null, null, null, null, null, null];

const result = passcodeArray.fill(true, 0, passcode.length);

console.log(result);

＆＃13;

Answer 2

leo提供的答案肯定是有帮助的，但它不会实时更新阵列。

所以，我决定将我在大学获得的知识用得很好。

这是我在好几个小时后得到的。

我使用堆栈的概念，我想要实现的只是比较堆栈长度和循环，以便可以更新视图。

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;
}

如何根据字符串的长度动态修改数组内的值？

2 个答案: