如何在React.js中使用重定向和从API提取数据

Question

我正在尝试创建一个登录表单，该表单通过获取API数据来验证数据。在这里，我得到了Star Wars英雄的数据，其中用户名将是他们的名字，密码将是他们的出生年份。

我的代码是：

class LoginPage extends Component{

    constructor(props){
        super(props);
        this.state={
            username:'',
            password:'',
            data:null
        }
        this.hadleUsername=this.hadleUsername.bind(this);
        this.handlePass=this.handlePass.bind(this);
    }

    hadleUsername(e){
        this.setState({username:e.target.value})
    }

    handlePass(e){
        this.setState({password:e.target.value})
    }

    submit(e){
        console.log(this.state.data);
        if(this.state.data!=null){
            this.state.data.results.map(data=>{
                if(data.name===this.state.username && data.birth_year===this.state.password){
                    return <Redirect to='/info/'/>
                }
            });
        }
    }

    async componentDidMount(){
        const response = await fetch('https://swapi.co/api/people/');
        const json = await response.json();
        this.setState({data:json});
    }

    render(){
        return(
            <form className='login-container'>
                <h3>Login Page</h3>
                <label>Username:</label>
                <input
                    type='text'
                    value={this.state.username}
                    placeholder='username'
                    onChange={this.hadleUsername}
                />
                <br/><br/>
                <label>Password:</label>
                <input
                    type='password'
                    value={this.state.password}
                    placeholder='password'
                    onChange={this.handlePass}
                />
                <br/><br/>
                <button type='submit' onClick={this.submit.bind(this)}>submit</button>
            </form>
        )
    }
}

有更好的方法吗？