Неперехваченная ошибка: невозможно прочитать свойство, длина которого равна нулю

Я продолжаю получать эту ошибку каждый раз, когда запускаю свое приложение ... он загружает файл scss, но сценарий js выдает эту ошибку.

TypeError: Cannot read property 'length' of undefined
at IndecisionApp.render (IndecisionApp.js?8eb7:80).... 

вот мой компонент IndecisionApp

import React from 'react';
import AddOption from './AddOption';
import Action from './Action';
import Header from './Header';
import Options from './Options';
import OptionModal from './OptionModal';

export default class IndecisionApp extends React.Component {
constructor(props) {
    super(props);
    this.handleDeleteOptions = this.handleDeleteOptions.bind(this);
    this.handlePick = this.handlePick.bind(this)
    this.handleAddOption = this.handleAddOption.bind(this)
    this.handleDeleteOption = this.handleDeleteOption.bind(this);
    this.handleClearSelectedOption = this.handleClearSelectedOption.bind(this);
    this.state = {
        option: [],
        selectedOption: undefined
    }
}

handleDeleteOptions (){
    this.setState(() => ({ options: [] }));
};
handleClearSelectedOption () {
    this.setState(() => ({ selectedOption: undefined }));
}
handleDeleteOption (optionToRemove){
    this.setState((prevState) => ({
        options: prevState.options.filter((option) => optionToRemove !== option)
    }));
};
handlePick () {
    const randomNum = Math.floor(Math.random() * this.state.options.length);
    const option = this.state.options[randomNum];
    this.setState(() => ({
        selectedOption: option
    }));
};
handleAddOption (option){
    if (!option) {
        return 'Enter valid value to add item';
    } else if (this.state.options.indexOf(option) > -1) {
        return 'This option already exists';
    }

    this.setState((prevState) => ({
        options: prevState.options.concat(option)
    }));
};
componentDidMount() {
    try {
        const json = localStorage.getItem('options');
        const options = JSON.parse(json);

        if (options) {
            this.setState(() => ({ options }));
        }
    } catch (e) {
        // Do nothing at all
    }
}
componentDidUpdate(prevProps, prevState) {
    if (prevState.options.length !== this.state.options.length) {
        const json = JSON.stringify(this.state.options);
        localStorage.setItem('options', json);
    }
}
componentWillUnmount() {
    console.info('componentWillUnmount');
}
render() {
    const subtitle = 'Put your life in the hands of a computer';

    return (
        <div>
            <Header subtitle = {subtitle} />
            <div className = "container">
                <Action
                    hasOptions = {this.state.options.length > 0}
                    handlePick = {this.handlePick}
                />
                <div className = "widget">
                    <Options
                        options = {this.state.options}
                        handleDeleteOptions = {this.handleDeleteOptions}
                        handleDeleteOption = {this.handleDeleteOption}
                    />
                    <AddOption
                        handleAddOption = {this.handleAddOption}
                    />
                </div>
            </div>
            <OptionModal
                selectedOption = {this.state.selectedOption}
                handleClearSelectedOption = {this.handleClearSelectedOption}
            />
        </div>
    );
  }
}

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

Опечатка - this.state.option -> this.state.optionS

kind user 03.12.2018 15:11

Укажите только соответствующий код проблемы. Становится очень сложно выяснить, что там происходит, глядя в код.

Bhojendra Rauniyar 03.12.2018 15:16

хорошо отмечено .. цените ваш вклад

yrufai 03.12.2018 16:01
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
649
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

В своем конструкторе вы устанавливаете имя состояния как параметр без s, но когда вы его вызываете, вы используете this.state.options с s, я думаю, что это ваша проблема

Опечатки не должно быть в ответ. Это просто не по теме в SO, поскольку это не помогает будущим посетителям.

Bhojendra Rauniyar 03.12.2018 15:17

я меняю state.option на state.options в конструкторе, и он сработал ... не могу поверить, что пропустил это

yrufai 03.12.2018 16:04
Ответ принят как подходящий

Когда вы устанавливаете начальное состояние в конструкторе, вы назначаете его option, а не options с s.

componentDidMount вызывается ПОСЛЕ того, как вызываются все детские методы componentDidMount и render. Итак, вы пытаетесь найти объект состояния options при инициализации с помощью option, поэтому нет длины для поиска.

Всякий раз, когда я получаю эти ошибки, это обычно означает, что есть орфографическая ошибка или ошибка в том, как я передаю реквизиты или состояние. Для вас это выглядит так, как будто вы определяете свойство 'option' в исходном состоянии в конструкторе, но в своем методе рендеринга вы вызываете this.state.options

В своем конструкторе вы устанавливаете имя состояния как параметр без s, но когда вы его вызываете, вы используете this.state.options с s, я думаю, что это ваша проблема

вариант: []

this.state.options

Другие вопросы по теме