TypeError：无法读取未定义的属性“值”-React-typeahead

问题描述

我正在使用react-bootstrap-typeahead组件来预测用户向文本框中的输入，但是我无法设置状态，因此用户可以在下拉菜单中单击选择。here

到目前为止，我的代码在这里。函数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",{
                      "": 2,ticker: "AAA",{
                      "": 3,ticker: "AAAU",{
                      "": 4,ticker: "AACG",security_type: "Stock"
                    }
                  ]}
                />
              </div>
              <div className="col-md-4">
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={this.handleAddTask}
                >
                  {" "}
                  Add New...{" "}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  checkEnterKey(e) {
    var keyCode = e.which || e.keyCode;
    if (keyCode == 13) {
      if (this.state.taskName.trim() !== "") {
        this.props.newTask(this.state.taskName);
      }
    }
  }

  updateTaskName(e) {
    this.setState({ taskName: e.target.value });
  }

  updateTask(e) {
    this.setState({ taskName: e.target.options.ticker });
    console.log(this.state);
  }

  handleAddTask(e) {
    let name = e.target.value;
    if (this.state.taskName.trim() !== "")
      this.props.newTask(this.state.taskName);
  }
}
export default AddWatchlistForm;

解决方法

建议，一种使用箭头函数保留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