ReactJS - Cómo pasar un state como parametro usando fecth api

 
Vista:

Cómo pasar un state como parametro usando fecth api

Publicado por Bryan (1 intervención) el 24/09/2019 18:05:53
este es mi componente formulario
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React, { Component } from 'react';
import Provincia from './Provincia.js'
class Formulario extends Component {
    constructor(props) {
        super(props);
        this.state = {departamento:[],idDepartamento:null };
 
        this.handleChangeDepartment = this.handleChangeDepartment.bind(this);
       // this.handleSubmit = this.handleSubmit.bind(this);
    }
 
    handleChangeDepartment=(event)=> {
 
        this.setState({idDepartamento: event.target.value});
        alert(this.state.idDepartamento)
 
      }
 
 
    componentDidMount() {
        fetch("http://10.85.110.6:81/api/Departamento")
        .then(res => res.json())
        .then((data) => {
          this.setState({ departamento : data })
          console.log(data)
        })
    }
 
 
 
 
    render () {
        const {departamento,idDepartamento,provincia}=this.state;
        let optionItems = departamento.map((departamento) =>
                <option key={departamento.idDepartamento} value={departamento.idDepartamento}>{departamento.descripcion}</option>
            );
 
 
        return (
            <div>
            <form onSubmit={this.handleSubmit}>
             <select onChange={this.handleChangeDepartment}>
                {optionItems}
 
             </select>
 
               <Provincia />
 
 
 
             </form >
 
             </div>
        )
    }
}
export default Formulario;

y aca es donde quiero pasar como parametro el idDepartamento para obtener una lista de Provincia dinamicante

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
import React, { Component } from 'react';
import Formulario from './Formulario.js'
const tournyAPI="http://10.85.110.6:81/api/Provincia?idDepartamento=4";
class Provincia extends Component {
    constructor(props) {
        super(props);
        this.state = {provincia:[],idDepartamento:props.id,idProvincia:'',departamento:[] };
 
        this.handleChangeDepartment = this.handleChangeDepartment.bind(this);
       // this.handleSubmit = this.handleSubmit.bind(this);
    }
 
 
    handleChange(event){
        this.setState({idProvincia: event.target.idProvincia});
        console.log(event.target.idProvincia);
    }
 
 
    componentDidMount() {
        const abc=this.handleChangeFormulario();
        fetch(tournyAPI+abc)
        .then(res => res.json())
        .then((data) => {
          this.setState({ departamento : data })
          console.log(data)
        })
    }
    render(){
        const {departamento,idDepartamento,provincia}=this.state;
    let provinciaItems = provincia.map((provincia) =>
    <option key={provincia.idDepartamento} value={provincia.idDepartamento}>{provincia.descripcion}</option>
);
        return (
            <div>
                {provinciaItems}
            </div>
        )
    }
 
}
 
export default Provincia;
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de juanjo
Val: 7
Ha aumentado su posición en 8 puestos en ReactJS (en relación al último mes)
Gráfica de ReactJS

Cómo pasar un state como parametro usando fecth api

Publicado por juanjo (13 intervenciones) el 09/07/2021 08:13:09
Hola, si te creas algo como esto puesdes añadir parametros necesarios para hacer tu promesa.
1
2
3
4
5
const ParametrosPeticionPost = {
    method: 'POST',
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify('tus datos'))
};

Y luego haces tu fetch
1
2
3
4
5
6
fetch('URL', ParametrosPeticionPost)
        .then(response => response.json())
        .then((data) => {
           //console.log(data);
        });
}

La URL sería así: 'http://10.85.110.6:81/api/Provincia'
y en body: pondría el/los parámetro/os a enviar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar