类型错误：无法读取未定义的属性“值” - React-typeahead

Question

我正在使用react-bootstrap-typeahead组件来预测用户在文本框中的输入，但我在设置状态时遇到问题，以便用户可以单击下拉菜单中的选项。到目前为止我的代码就在这里。该函数handleAddtask在输入时将任务添加到任务列表，但我无法将其分配给预先输入下拉列表。（我仍在学习反应，因此任何有关这方面的资源也将不胜感激）。import React, { Component } from "react";import PropTypes from "prop-types";import { Typeahead } from "react-bootstrap-typeahead";class AddWatchlistForm extends Component {  constructor(props) {    super(props);    this.state = {      taskName: ""    };    this.handleAddTask = this.handleAddTask.bind(this);  }  static propTypes = {    newTask: PropTypes.func.isRequired  };  render() {    return (      <div className="row">        <div className="col-md-6 col-md-offset-3">          <div style={{ margin: "20px" }}>            <div className="row">              <div className="col-md-6">                <Typeahead                  placeholder=""                  onChange={e => this.updateTaskName(e)}                  onClick={(e => this.updateTask(e), this.handleAddTask)}                  value={this.state.taskName}                  onKeyPress={e => this.checkEnterKey(e)}                  labelKey={option =>                    `${option.ticker} ${option.security_type}`                  }                  options={[                    {                      "": 0,                      ticker: "A",                      security_type: "Stock"                    },                    {                      "": 1,                      ticker: "AA",                      security_type: "Stock"                    },                    {                      "": 2,                      ticker: "AAA",                      security_type: "Stock"                    },                    {                      "": 3,                      ticker: "AAAU",                      security_type: "Stock"                    },                    {                      "": 4,                      ticker: "AACG",                      security_type: "Stock"                    }

Answer 1

建议，使用箭头函数保留上下文的更好的方法this：

删除以下内容...

  constructor(props) {

    super(props);

    this.state = {

      taskName: ""

    };

    this.handleAddTask = this.handleAddTask.bind(this);

  }

  handleAddTask(e) {

    let name = e.target.value;

    if (this.state.taskName.trim() !== "")

      this.props.newTask(this.state.taskName);

  }

并添加以下内容：

  state = {

    taskName: ""

  };

  handleAddTask = e => {

    let name = e.target.value;

    if (this.state.taskName.trim() !== "")

      this.props.newTask(this.state.taskName);

  }

TypeError你得到应得的原因undefined也是同样的原因。我只是尝试将所有普通函数替换为箭头函数，现在它们都工作正常。否则，您应该绑定到this每个类属性函数，这是一个繁琐的双重过程并且性能密集。

另外，在handleAddTask功能中，请更新：

  handleAddTask = e => {

    let name = e.target.value;

    if (this.state.taskName.trim() !== "")

      this.props.newTask(name);

  };

解决方案

问题在于e传递给的 。将您的updateTaskName功能更改为：

  updateTaskName = e => {

    this.setState({ taskName: e.length > 0 ? e[0].security_type : "" });

  };

这是因为，e是：

e = {

  "": 2,

  ticker: "AAA",

  security_type: "Stock"

};

工作演示： https://codesandbox.io/s/confident-moore-wsq5p