javascript - 为什么控制台日志返回代理对象？

Question

所以这是一个非常奇怪的现象，我不太确定我的代码中发生了什么。本质上，用户输入客户 ID/潜在客户 ID，并可以从此输入中搜索该客户的信息。无论出于何种原因，当我调用方法 GetLeadInfo(leadID) 并控制台记录 LeadID 的值时，我都会得到带有各种值的代理对象。我原本期望只得到一个整数，但结果却得到了。我以前从未见过这个，也不知道为什么这个方法会检索这个奇怪的值。

这是 myfile.js

import React from 'react';

export default Class MyFile extends React.Component{
 constructor(props){
  super(props);

  this.state = {
   LeadID: "",
   CustomerFirstName: "",
   CustomerLastName: "",
   CustomerAddress: "",
   CustomerState: "",
   CustomerCity: "",
   CustomerZip: "",
   CustomerEmail: "",
   BusinessName: "",
   BusinessAddress: "",
  }
 }

GetLeadInfo(leadID){
console.log(leadID);
        let firstName = "";
        let lastName = "";
        let customerID = "";
        let customerAddress = "";
        let customerCity = ""
        let customerState = "";
        let customerZip = "";
        let customerEmail = "";

        $.get('/crm/leads/' + leadID).then(response => {

            firstName = response.extended_info.fields_by_name["Customer First Name"];
            lastName = response.extended_info.fields_by_name["Customer Last Name"];
            customerID = response.extended_info.fields_by_name["Customer Number"];
            customerAddress = response.extended_info.fields_by_name["Street"];
            customerCity = response.extended_info.fields_by_name["City"];
            customerState = response.extended_info.fields_by_name["State"];
            customerZip = response.extended_info.fields_by_name["Zip"];
            customerEmail = response.extended_info.fields_by_name["Email"];

            if(this.state.searchCondition === "StoresWithinCustomer"){
                this.SaveCoordsForCustomer(response);
            }

            this.setState({CustomerInfo: response,
                            CustomerID: customerID.trim(), 
                            CustomerName: firstName + " " + lastName,
                            CustomerAddress: customerAddress,
                            CustomerCity: customerCity,
                            CustomerState: customerState,
                            CustomerZip: customerZip,
                            CustomerEmail: customerEmail,              
            }, function (){
                this.getLastAd2();  // needed callback to retrieve info after setState
            });

            //console.log(response);
        }).catch(error =>{
            console.log("Error: " + error);
        });

}

LeadIDHandler(e){
        let lead = e.target.value;
        this.setState({LeadID: lead});
    }

render(){
return(
<div className="MainContainer">
 <div className="Content">
 <label style={{display: 'block', marginBottom: '5px'}}>Search by Lead ID</label> 
                                <input type="text" style={{width: '10%'}} id="LeadID" onChange={this.LeadIDHandler.bind(this)}></input> 
                                <button onClick={this.GetLeadInfo.bind(this.state.LeadID)}>Search</button> 

                                <label style={{display: 'block', marginBottom: '5px'}}>Customer Number (if applicable)</label> 
                                <input type="text" style={{width: '10%'}} id="CustomerNumber" value={this.state.CustomerID}></input> 

                                <label style={{display: 'block', marginBottom: '5px'}}>Customer Name</label>                                                    
                                <input type="text" style={{width: '10%'}} id="CustomerName" onChange={this.CustomerInfoHandler.bind(this)} style={{display: 'block'}} value={this.state.CustomerName}></input>  

                                <label style={{display: 'block', marginBottom: '5px'}}>Business Name</label>                                                    
                                <input type="text" style={{width: '10%'}} id="BusinessName" onChange={this.CustomerInfoHandler.bind(this)} style={{display: 'block'}} value={this.state.BusinessName}></input>

                                <label style={{display: 'block', marginBottom: '5px'}}>Business Address</label>                                                    
                                <input type="text" style={{width: '10%'}} id="BusinessAddress" onChange={this.CustomerInfoHandler.bind(this)} style={{display: 'block'}} value={this.state.BusinessAddress}></input>

                                <label style={{display: 'block', marginBottom: '5px'}}>City</label>                                                    
                                <input type="text" style={{width: '10%'}} id="CustomerCity" onChange={this.CustomerInfoHandler.bind(this)} style={{display: 'block'}} value={this.state.CustomerCity}></input>

                                <label style={{display: 'block', marginBottom: '5px'}}>State</label>                                                    
                                <input type="text" style={{width: '10%'}} id="CustomerState" onChange={this.CustomerInfoHandler.bind(this)} style={{display: 'block'}} value={this.state.CustomerState}></input>

                                <label style={{display: 'block', marginBottom: '5px'}}>Zip</label>                                                    
                                <input type="text" style={{width: '10%'}} id="CustomerZip" onChange={this.CustomerInfoHandler.bind(this)} style={{display: 'block'}} value={this.state.CustomerZip}></input>

 </div>
</div>
);
}

}

如果有人知道为什么会发生这种情况，我将不胜感激!谢谢。

Answer 1

传递给 .bind() 的第一个参数不是对象中的函数在调用时将获得的第一个参数。

所以使用这段代码:

this.GetLeadInfo.bind(this.state.LeadID)

该函数的 this 对象绑定(bind)到 LeadID，并且该函数将在您没有显式参数的情况下被调用 - React 将添加它自己的参数，包括一个事件对象，这就是您在控制台中看到的内容。

你应该这样做:

this.GetLeadInfo.bind(this, this.state.LeadID)