Состояние Reactjs инициализирует массив значений

Question

Я пытаюсь инициализировать массив логических значений, где в определенной позиции в массиве есть другое значение.

Если я инициализирую состояние таким образом, пустым будет массив.

state = {
    activeItems: [...new Array(5)].map((item, idx) =>
      idx === 1 ? true : false
    )
}

Answer 1

Код работоспособен из коробки в нативном ES6:

[...new Array(5)].map((item, idx) =>
  idx === 1 ? true : false
)

В результате получается

[false, true, false, false, false]

array.

Любые несоответствия с ним вызваны используемым транспортером и его реализацией ... синтаксиса расширения массива.В некоторых реализациях это может привести к несовместимости кода, особенно TypeScript с отключенной опцией компилятора downlevelIteration.Например, он используется в Stackblitz, даже в проектах JS.Без итерации нижнего уровня она будет перенесена в:

new Array(5).slice().map(function (item, idx) {
    return idx === 1 ? true : false;
});

new Array(5).slice(), что приведет к массиву разреженный , который не будет повторяться с map.Эту ситуацию можно решить с помощью Array.from или Array.fill (как уже предлагают другие ответы).Оба будут заполнять разреженный массив значениями undefined, которые можно повторять с помощью map:

Array.from(new Array(5)).map((item, idx) => idx === 1);

new Array(5).fill().map((item, idx) => idx === 1);

Answer 2

Массив из дает вам массив с <empty slots>

Проблема в том, что map не повторять над пустыми пространствами

let arr = new Array(5)

let modified = arr.map((e,i)=> console.log(i)) // prints nothing
console.log('modifed prints nothing')

Заполнить пустое состояние, используя fill

let arr = new Array(5)

let modified = arr.fill(0).map((e,i)=> console.log(i))  //prints index

Answer 3

Я не уверен, почему вы упомянули, что ваш код возвращает пустой массив.Потому что он возвращает ожидаемый результат.

Вместо этого вы можете использовать Array.from, чтобы избежать любых несоответствий, которые у вас есть:

const state = {
    activeItems: Array.from({length:5}, (_, idx) => idx === 1)
}

console.log(state)

Второй параметр Array.from является функцией map.

Answer 4

Вы должны будете сначала fill ваш массив перед отображением:

state = {
    activeItems: new Array(5).fill().map((item, idx) => idx === 1)
}

const result = new Array(5).fill().map((item, idx) => idx === 1)
console.log(result)

Также idx === 1 ? true : false можно уменьшить до idx === 1, и деконструкция массива не требуется.