Question

我总是在运行我的应用程序时始终遇到此错误。.它会加载scss文件，但js脚本会引发这些错误。每当我运行我的应用程序时，我都会继续收到此错误。.它会加载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.log('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>
    );
  }
}

请帮帮我。我花了几天的时间试图解决这个问题，但无济于事。我尝试了所有我可以尝试修复的代码中的错误。请帮帮我。我花了几天的时间试图解决这个问题，但无济于事。我已尽我所能尝试修复此错误的代码。

Answer 1

在构造函数中设置初始状态时，请使用option将其分配给options而不是s。

componentDidMount在所有子方法componentDidMount和render被调用之后被调用。因此，当您使用options进行初始化时，您正在尝试寻找option的状态对象，因此没有长度可以查找。

Answer 2

在构造函数中，将状态名称设置为不带s的选项，但是在调用它时，您正在将s.state.options与s一起使用，我认为这是您的问题

Answer 3

每当我收到这些错误时，通常意味着我传递道具或状态时出现拼写错误或错误。对您来说，您似乎在构造函数的初始状态下定义了属性'option'，但是在渲染方法中，您正在调用this.state.options

Answer 4

在构造函数中，将状态名称设置为不带s的选项，但是当您调用它时，您正在将s.state.options与s一起使用，我认为这是您的问题

选项：[]

this.state.options

未捕获的错误：无法读取null的属性长度

4 个答案: