使用React从Nodejs获取数据

Question

使用这个我从Nodejs后端获取代码

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

我该怎么做？

我的代码==

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

为什么（TH）你在componentDidMmount获取，如果你需要在提交时完成？只需将此代码移至this.performTask即可。

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

Answer 2

如果删除browserHistory.push（“/ data”），您是否收到回复？尝试在承诺中添加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，在其他组件中这是不同的。