1
resposta

Sem conseguir enviar dados para a API

Pessoal, não consigo enviar os dados para a API, quando tento ele retorna um erro 400 no navegador. Esse foi o código que fiz.

export default class Signup extends Component {

    constructor(props) {
        super(props);
        this.state = {login: '', senha: '', urlPerfil: ''};
    }

    enviaDados(event) {
        event.preventDefault();

        const requestInfo = {
            method: 'POST',
            body: JSON.stringify({login: this.login.value, senha: this.senha.value, urlPerfil: this.urlPerfil.value}),
            headers: new Headers({
                'Content-type': 'application/json'
            })
        };

        fetch('http://localhost:8080/usuarios', requestInfo)
            .then(response => response.json())
            .then(data => {
                console.log(data);
            })
            .catch(err => console.log(err));
    }

    validaDados() {
        if(this.login === this.senha) {
            throw new Error("Usuário e senha estão iguais.")
        }
    }

    render() {
        return (
            <div>
                <h1 className="titulo">Signup</h1>
                <ul>
                    <li><span>{this.validaDados}</span></li>
                </ul>
                <form onSubmit={this.enviaDados.bind(this)}>
                    <label htmlFor="login">Login</label>
                    <input type="text" id="login" required ref={(input) => this.login = input}/>
                    <label htmlFor="senha">Senha</label>
                    <input type="password" id="senha" required ref={(input) => this.senha = input}/>
                    <label htmlFor="confirmacao">Confirmação</label>
                    <input type="password" id="confirmacao" required/>
                    <label htmlFor="url">Url do Perfil</label>
                    <input type="text" id="url" placeholder="http://endereco.com" ref={(input) => this.urlPerfil = input}/>
                    <input type="submit" value="Signup"/>
                </form>
            </div>
        )
    }
}
1 resposta

Fala aí Edilson, tudo bem? Consegue postar o erro completo? Ficaria mais fácil tentar lhe ajudar.

Para isso, antes de realizar a requisição, navegue até a aba "Network" (no caso em inglês), dai faça a request. Provavelmente uma linha vermelha irá aparecer, clique sobre ela e vá em "Preview", lá deve existir uma resposta da API.

Fico no aguardo.