TypeError: Cannot read property 'value' of undefined - React-typeahead

Question

我正在使用 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",
                      security_type: "Stock"
                    },
                    {
                      "": 2,
                      ticker: "AAA",
                      security_type: "Stock"
                    },
                    {
                      "": 3,
                      ticker: "AAAU",
                      security_type: "Stock"
                    },
                    {
                      "": 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;

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);
  }

和你因为undefined得到TypeError的原因是一样的。我只是尝试将所有普通函数替换为箭头函数，它们现在都运行良好。否则你应该为每个 class 属性函数绑定到 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

TypeError: Cannot read property 'value' of undefined - React-typeahead

TypeError: Cannot read property 'value' of undefined - React-typeahead

javascript

reactjs

state

typeahead

reactstrap