Question

我有一个用于用户注册的类组件以及一个表单。我正在根据用户输入进行api调用，以检查用户是否存在。 handleInputChange 最初将状态设置为某些用户输入，而 handleSubmit 调用从端点获取的另一个函数。我想将 this.state.user 设置为该响应。我尝试了此link上的内容，但无法正常工作。任何想法都会有所帮助

import React, { Component } from 'react';

const user_add_api = "http://localhost:5000/add_user";
const user_check_api = "http://localhost:5000/user_by_username/";

这是课程：

class SignUp extends Component {
constructor(props) {
    super(props);

    this.state = {
        first_name: '',
        last_name: '',
        username: '',
        email: '',
        password: '', 
        user: ''
    };
}

checkUser = (user) => {
    const userPromise = fetch(user_check_api + user);
    var meh = '123meh';
    userPromise
        .then(data => data.json())
        .then(data => this.setState({user: {...this.state.user, meh}}))        


        // let curr = {...this.state};
        // curr['user'] = 'somevalue';
        // this.setState({ curr:curr['user'] });
    console.log(this.state.user);
}

handleSubmit = (event) => {
    event.preventDefault();
    const data = this.state;
    let s = this.checkUser(data.username);
    console.log(data);
}

handleInputChange = (event) => {
    event.preventDefault();
    this.setState({
        [event.target.name]: event.target.value, 
    })
}

render () {
    return (
        <form className="form-horizontal">
            <div className="form-group">
                <label className="col-md-4 control-label">First Name</label>  
                <div className="col-md-4">
                    <input name="first_name" type="text" placeholder="John" className="form-control input-md" required onChange={this.handleInputChange}></input>  
                </div>

                <label className="col-md-4 control-label">Last Name</label>  
                <div className="col-md-4">
                    <input name="last_name" type="text" placeholder="Doe" className="form-control input-md" required onChange={this.handleInputChange}></input>
                </div>

                <label className="col-md-4 control-label">Username</label>  
                <div className="col-md-4">
                    <input name="username" type="text" placeholder="John Doe" className="form-control input-md" required onChange={this.handleInputChange}></input>  
                </div>

                <label className="col-md-4 control-label">Email</label>  
                <div className="col-md-4">
                    <input name="email" type="text" placeholder="johndoe@example.com" className="form-control input-md" required onChange={this.handleInputChange}></input>
                </div>

                <label className="col-md-4 control-label">Password</label>
                <div className="col-md-4">
                    <input name="password" type="password" placeholder="" className="form-control input-md" required onChange={this.handleInputChange}></input>
                </div>


                <label className="col-md-4 control-label"></label>
                <div className="col-md-8">
                    <button name="save" onClick={this.handleSubmit} className="btn btn-success">Register</button>
                </div>
            </div>
        </form>
    );
 }
}

 export default SignUp;

Answer 1

此fetch(user_check_api + user)返回一个Promise，您无需等待。也许你应该那样改变

checkUser = (user) => {
    var meh = '123meh';
    fetch(user_check_api + user)
        .then(data => data.json())
        .then(data => {
                this.setState({user: {...this.state.user, meh}})
                console.log(this.state.user) // Show log in in success func
              })
}

或使用async/await

checkUser = async (user) => {
    const userPromise = await fetch(user_check_api + user);
    var meh = '123meh';
    userPromise
        .then(data => data.json())
        .then(data => this.setState({
                          user: {...this.state.user, meh} 
                       }, console.log(this.state.user))) // Show log in callback    
}

如何在react.js中的承诺响应后更新状态

1 个答案: