Получение длины массива объектов в Reactjs

Question

У меня есть массив объектов:

const boxOptions = [
  { 0: "$250", 1: "$500", 2: "$750", 3: "$1000", 4: "$1250", 5: "$1500" },
  { 0: "$500", 1: "$750", 2: "$1000", 3: "$1250", 4: "$1500", 5: "$2000" },
  { 0: "$750", 1: "$1000", 2: "$1250", 3: "$1500", 4: "$2000", 5: "$2500" },
]

, который устанавливается в состояние и затем отображается в моем компоненте RangeSlider:

 state = {
    boxOptions: boxOptions,
    tier: 0
  };
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <RangeSlider label='What sort of box are you after?' onChange={this.handleBoxChange} min={0} max={5} defaultValue={this.state.boxIndex} marks={this.state.boxOptions[this.state.tier]} step={null} />
      </div>
    );
  }

Когда я пытаюсь получить длинуэто в моем обработчике onChange, я получаю неопределенный:

  handleBoxChange = index => {
    console.log(this.state.boxOptions[this.state.tier].length, 'boxOptions')
  }

Почему это?

Ссылка на Песочницу

Answer 1

this.state.boxOptions[this.state.tier].length

this.state.boxOptions[this.state.tier] сработает и вернет { 0: "$250", 1: "$500", 2: "$750", 3: "$1000", 4: "$1250", 5: "$1500" }, однако, у объекта нет свойства .length, и поэтому он возвращает неопределенное значение.

Если вам нужно общее количество свойств этого объекта, вы можете использовать:

Object.keys(this.state.boxOptions[this.state.tier]).length

Object.keys(object) вернет вам массив всех ключей внутри объекта