未捕获错误:无法读取 null 的属性长度
2018-12-03
770
每次运行我的应用程序时,我都会收到此错误。它加载了 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>
);
}
}
请帮帮我。我花了好几天试图解决这个问题,但无济于事。我尽了一切努力试图修复代码中的这个错误。
3个回答
在构造函数中设置初始状态时,您将其分配给
option
,而不是使用
s
的
options
。
componentDidMount
在所有子级的
componentDidMount
和
render
方法被调用之后被调用。因此,当您使用
option
初始化时,您会尝试查找
options
的状态对象,因此没有长度可查找。
Katia Wheeler
2018-12-03
在您的构造函数中,您将状态名称设置为不带 s 的选项,但是当您调用它时,您使用的是带有 s 的 this.state.options,我认为这是您的问题
Abdelouahed EL HARIRI
2018-12-03
每当我收到这些错误时,通常意味着我传递 props 或 state 的方式存在拼写错误或错误。对您来说,您似乎在构造函数中的初始状态中定义了属性
'option'
,但在渲染方法中您调用的是
this.state.options
Hackstreet_Boy
2018-12-03