Javascript TypeError:无法读取属性'；价值'；未定义的-提前反应类型

我正在使用

react bootstrap typeahead

组件预测用户对文本框的输入，但是我在设置状态时遇到了问题，因此用户可以单击下拉菜单中的选择

到目前为止，我的代码在这里。函数

handleAddtask

在输入任务时将任务添加到任务列表中，但我无法将其分配给typeahead下拉列表。（我仍在学习react，因此在此方面的任何资源都将不胜感激）

import React，{Component}来自“React”；
从“道具类型”导入道具类型；
从“react bootstrap Typeahead”导入{Typeahead}；
类AddWatchlistForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
任务名称：“
};
this.handleAddTask=this.handleAddTask.bind（this）；
}
静态类型={
新任务：需要PropTypes.func
};
render（）{
返回(
this.updateTaskName（e）}
onClick={（e=>this.updateTask（e），this.HandLeadTask）}
值={this.state.taskName}
onKeyPress={e=>this.checkEnterKey（e）}
labelKey={option=>
`${option.ticker}${option.security_type}`
}
选择权={[
{
"": 0,
股票代码：“A”，
证券类型：“股票”
},
{
"": 1,
股票代码：“AA”，
证券类型：“股票”
},
{
"": 2,
股票代码：“AAA”，
证券类型：“股票”
},
{
"": 3,
股票代码：“AAAU”，
证券类型：“股票”
},
{
"": 4,
股票代码：“AACG”，
证券类型：“股票”
}
]}
/>
{" "}
添加新…{“}
);
}
检查输入键（e）{
var-keyCode=e.which | | e.keyCode；
如果（键代码==13）{
if（this.state.taskName.trim（）！=“”）{
this.props.newTask（this.state.taskName）；
}
}
}
updateTaskName（e）{
this.setState（{taskName:e.target.value}）；
}
更新任务（e）{
this.setState（{taskName:e.target.options.ticker}）；
console.log（this.state）；
}
手持任务（e）{
让name=e.target.value；
if（this.state.taskName.trim（）！=“”）
this.props.newTask（this.state.taskName）；
}
}
导出默认AddWatchlistForm；

建议，使用箭头函数更好地保存

此

的上下文：

删除以下内容

构造函数（道具）{
超级（道具）；
此.state={
任务名称：“
};
this.handleAddTask=this.handleAddTask.bind（this）；
}
手持任务（e）{
让name=e.target.value；
if（this.state.taskName.trim（）！=“”）
this.props.newTask（this.state.taskName）；
}

并添加以下内容：

状态={
任务名称：“
};
handleAddTask=e=>{
让name=e.target.value；
if（this.state.taskName.trim（）！=“”）
this.props.newTask（this.state.taskName）；
}

由于

未定义

而导致

类型错误

的原因与此相同。我只是尝试将所有的普通函数替换为箭头函数，现在它们都工作得很好。否则，您应该为每个类属性函数绑定到此，这是一个繁琐的双重过程，需要大量的性能

另外，在

handleAddTask

功能中，请更新：

handleAddTask=e=>{
让name=e.target.value；
if（this.state.taskName.trim（）！=“”）
this.props.newTask（名称）；
};

解决方案

问题在于传递给的

e

。将

updateTaskName

函数更改为：

updateTaskName=e=>{
this.setState（{taskName:e.length>0？e[0]。安全类型：'}）；
};

这是因为，

e

是：

e={
"": 2,
股票代码：“AAA”，
证券类型：“股票”
};

---

工作演示：

这非常好用！回车键停止了提交，但我想我能找到那部分。@JasonMaynard

console.log（）

是你的朋友（不是谷歌）。呵呵。很高兴它帮助了你。