Я продолжаю получать эту ошибку каждый раз, когда запускаю свое приложение ... он загружает файл 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>
);
}
}
Пожалуйста, помогите мне. Я потратил дни, пытаясь решить эту проблему, но безрезультатно. Я перепробовал все, что мог, пытаясь исправить эту ошибку в коде.
Укажите только соответствующий код проблемы. Становится очень сложно выяснить, что там происходит, глядя в код.
хорошо отмечено .. цените ваш вклад



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


В своем конструкторе вы устанавливаете имя состояния как параметр без s, но когда вы его вызываете, вы используете this.state.options с s, я думаю, что это ваша проблема
Опечатки не должно быть в ответ. Это просто не по теме в SO, поскольку это не помогает будущим посетителям.
я меняю state.option на state.options в конструкторе, и он сработал ... не могу поверить, что пропустил это
Когда вы устанавливаете начальное состояние в конструкторе, вы назначаете его option, а не options с s.
componentDidMount вызывается ПОСЛЕ того, как вызываются все детские методы componentDidMount и render. Итак, вы пытаетесь найти объект состояния options при инициализации с помощью option, поэтому нет длины для поиска.
Всякий раз, когда я получаю эти ошибки, это обычно означает, что есть орфографическая ошибка или ошибка в том, как я передаю реквизиты или состояние. Для вас это выглядит так, как будто вы определяете свойство 'option' в исходном состоянии в конструкторе, но в своем методе рендеринга вы вызываете this.state.options
В своем конструкторе вы устанавливаете имя состояния как параметр без s, но когда вы его вызываете, вы используете this.state.options с s, я думаю, что это ваша проблема
вариант: []
this.state.options
Опечатка -
this.state.option->this.state.optionS