第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

類型錯(cuò)誤:無法讀取未定義的屬性“值” - React-typeahead

類型錯(cuò)誤:無法讀取未定義的屬性“值” - React-typeahead

蝴蝶刀刀 2023-07-20 15:46:22
我正在使用react-bootstrap-typeahead組件來預(yù)測(cè)用戶在文本框中的輸入,但我在設(shè)置狀態(tài)時(shí)遇到問題,以便用戶可以單擊下拉菜單中的選項(xiàng)。到目前為止我的代碼就在這里。該函數(shù)handleAddtask在輸入時(shí)將任務(wù)添加到任務(wù)列表,但我無法將其分配給預(yù)先輸入下拉列表。(我仍在學(xué)習(xí)反應(yīng),因此任何有關(guān)這方面的資源也將不勝感激)。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"? ? ? ? ? ? ? ? ? ? }
查看完整描述

1 回答

?
函數(shù)式編程

TA貢獻(xiàn)1807條經(jīng)驗(yàn) 獲得超9個(gè)贊

建議,使用箭頭函數(shù)保留上下文的更好的方法this:


刪除以下內(nèi)容...


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

  }

并添加以下內(nèi)容:


  state = {

    taskName: ""

  };


  handleAddTask = e => {

    let name = e.target.value;

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

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

  }

TypeError你得到應(yīng)得的原因undefined也是同樣的原因。我只是嘗試將所有普通函數(shù)替換為箭頭函數(shù),現(xiàn)在它們都工作正常。否則,您應(yīng)該綁定到this每個(gè)類屬性函數(shù),這是一個(gè)繁瑣的雙重過程并且性能密集。


另外,在handleAddTask功能中,請(qǐng)更新:


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

  };

這是因?yàn)?,e是:


e = {

  "": 2,

  ticker: "AAA",

  security_type: "Stock"

};

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


查看完整回答
反對(duì) 回復(fù) 2023-07-20
  • 1 回答
  • 0 關(guān)注
  • 188 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)