Question

使用此方法，我正在从Nodejs后端获取代码

但是问题是，当我单击表单中的提交按钮时，它会更改状态中的变量，但状态已使用默认值进行了调用。因此，我希望仅在使用更改后的状态值单击“提交”按钮时调用提取函数。

我该怎么做？

我的代码==

componentDidMount() {
        fetch('/api/customers/'+this.state.category1+'/'+this.state.zip1+'/'+this.state.age1+'/'+'/'+this.state.gender1)
           .then(res => res.json())
           .then(customers => this.setState({customers}, () => console.log('Customers fetched...', customers)));
}

如果想要下一步，则无用的代码

<form onSubmit={this.performTask.bind(this)}>

    <select value={this.state.category1} onChange={this.changeCategory1.bind(this)} >
        <option >Auto</option><option>Life</option>
    </select>
    <br/>

    <input type="text" onChange={this.changeZipCode.bind(this)}/>
    </div>
        <div>
            <select name="gender" className="form-control form-control-lg">
                <option>Male</option>
                <option>Female</option>
            </select>
        </div>
        <label >Age</label>
        <br/>

        <input type="text" ref="ageref1" onChange={this.changeAge1.bind(this)} placeholder="35" className="ap-input"  role="combobox"  />

        <br/>
        <button type="submit" className="button">Submit</button>
    </div>
</form>

编辑

此函数正在重定向页面，因此我认为状态变量会丢失。我的控制台什么都没有

performTask(event){

        browserHistory.push("/data");
        console.log(this);
        console.log(this.state.zip1);
        console.log(this.state.age1);
        console.log("asd");
        fetch('/api/customers/'+this.state.category1+'/'+this.state.zip1+'/'+this.state.age1+'/'+'/'+this.state.gender1)
            .then(res => res.json())
            .then(customers => this.setState({customers}, () => console.log('Customers fetched...', customers)));
        //event.preventDefault();
    }

Answer 1

如果需要在提交时完成componentDidMmount中的内容，为什么？只需将这段代码移到this.performTask中即可。

在render中绑定是很小的错误，在构造函数中绑定方法或使用ES6语法。

Answer 2

如果删除browserHistory.push（“ / data”），会收到响应吗？尝试在您的Promise中添加catch语句并更改回调中的路由。

Answer 3

您必须在构造函数中绑定函数，或者使用箭头函数来正确调用函数。另外，其中的一些接收事件的功能将需要preventDefault()才能使用，因此您可以防止默认行为在单击按钮时执行所需的操作。

performTask(event){
    event.preventDefault(); // prevent first
    browserHistory.push("/data");
    console.log(this);
    console.log(this.state.zip1);
    console.log(this.state.age1);
    console.log("asd");
    fetch('/api/customers/' + this.state.category1 + '/' + this.state.zip1 + '/' + this.state.age1 + '/' + '/' + this.state.gender1)
        .then(res => res.json())
        .then(customers => this.setState({customers}, () => console.log('Customers fetched...', customers)));
}

changeZipCode(event) {
    event.preventDefault(); // prevent first
    this.setState({zip1: event.target.value});
}
changeAge1(event) {
    event.preventDefault(); // prevent first
    this.setState({age1: event.target.value});
}

changeCategory1(event) {
    // No need to prevent default
    this.setState({category1: event.target.value});
}

绑定构造函数中的功能

1）绑定

this.functionName.bind(this);

2）像这样呼叫：

this.functionName

在您的情况下：

constructor() {
    super();
    this.state = {
        customers: [],
        category1: "Auto",
        gender1: "Male",
        zip1: 90293,
        age1: 22
    };

    // Bind functions
    this.performTask = this.performTask.bind(this);
    this.changeCategory1 = this.changeCategory1.bind(this);
    this.changeZipCode = this.changeZipCode.bind(this);
    this.changeAge1 = this.changeAge1.bind(this);
}

并像这样使用它们：

<form onSubmit={this.performTask}>

<select value={this.state.category1}  onChange={this.changeCategory1} className="form-control form-control-lg">

<input type="text" ref="zipcoderef1" onChange={this.changeZipCode} placeholder="110045" className="ap-input"  role="combobox" dir="auto" />

<input type="text" ref="ageref1" onChange={this.changeAge1} placeholder="35" className="ap-input"  role="combobox"  />

箭头功能

1）不要绑定，保持构造函数不变

2）像这样呼叫：

(params) => this.functionName(params)

在您的情况下：

constructor() {
    super();
    this.state = {
        customers: [],
        category1: "Auto",
        gender1: "Male",
        zip1: 90293,
        age1: 22
    };
}

在调用函数时使用箭头函数：

<form onSubmit={(e)=>this.performTask(e)}>

<select value={this.state.category1}  onChange={(e)=>this.changeCategory1(e)} className="form-control form-control-lg">

<input type="text" ref="zipcoderef1" onChange={(e)=>this.changeZipCode(e)} placeholder="110045" className="ap-input"  role="combobox" dir="auto" />

<input type="text" ref="ageref1" onChange={(e)=>this.changeAge1(e)} placeholder="35" className="ap-input"  role="combobox"  />

箭头功能中的e是这些功能将收到，在这种情况下，e对于这些类型的组件将始终是event，在其他组件中则有所不同。

使用React从Node.js获取数据

3 个答案: