Как использовать Redirect в React.js для извлечения данных из API - PullRequest
Новая
       16

Как использовать Redirect в React.js для извлечения данных из API

0 голосов
/ 11 ноября 2018

Я пытаюсь создать форму входа в систему, которая проверяет данные путем извлечения данных 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>
        )
    }
}

Есть ли лучший способ сделать это?

...