类型错误：无法读取未定义的属性“值” - 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：删除以下内容...&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; taskName: ""&nbsp; &nbsp; };&nbsp; &nbsp; this.handleAddTask = this.handleAddTask.bind(this);&nbsp; }&nbsp; handleAddTask(e) {&nbsp; &nbsp; let name = e.target.value;&nbsp; &nbsp; if (this.state.taskName.trim() !== "")&nbsp; &nbsp; &nbsp; this.props.newTask(this.state.taskName);&nbsp; }并添加以下内容：&nbsp; state = {&nbsp; &nbsp; taskName: ""&nbsp; };&nbsp; handleAddTask = e => {&nbsp; &nbsp; let name = e.target.value;&nbsp; &nbsp; if (this.state.taskName.trim() !== "")&nbsp; &nbsp; &nbsp; this.props.newTask(this.state.taskName);&nbsp; }TypeError你得到应得的原因undefined也是同样的原因。我只是尝试将所有普通函数替换为箭头函数，现在它们都工作正常。否则，您应该绑定到this每个类属性函数，这是一个繁琐的双重过程并且性能密集。另外，在handleAddTask功能中，请更新：&nbsp; handleAddTask = e => {&nbsp; &nbsp; let name = e.target.value;&nbsp; &nbsp; if (this.state.taskName.trim() !== "")&nbsp; &nbsp; &nbsp; this.props.newTask(name);&nbsp; };解决方案问题在于e传递给的 。将您的updateTaskName功能更改为：&nbsp; updateTaskName = e => {&nbsp; &nbsp; this.setState({ taskName: e.length > 0 ? e[0].security_type : "" });&nbsp; };这是因为，e是：e = {&nbsp; "": 2,&nbsp; ticker: "AAA",&nbsp; security_type: "Stock"};工作演示：&nbsp;https://codesandbox.io/s/confident-moore-wsq5p