Estoy construyendo un selector con datos tomados de una base de datos. Funciona bien, pero no puedo enviar el valor que he almacenado en auth.token (en el componente useAuth ) a la URL. Lo he intentado de muchas maneras y no puedo, me puedes decir como puedo?
//Call import useAuth from "../hooks/useAuth"; const ValorToken = () => { const { auth } = useAuth(); const valorToken = auth.token; return (valorToken) }; export default class Cias extends Component { componentDidMount() { return fetch('https://url-test-test.es/api_movil/test.php', { method: 'POST', headers: { "Content-Type": "application/json", Authorization: `Bearer ${ValorToken}`, }, body: JSON.stringify({ token: ValorToken, id_marca: '5' }) }) .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson, }, function() {}); }) .catch((error) => { console.error(error); }); }; }Básicamente, useAuth es un gancho de reacción que depende de los ganchos de núcleo de reacción ( useState , useEffect , ...) por lo que debe llamarse solo en un componente de función.
Aquí hay otra implementación si desea este tipo de comportamiento (obtener valor de un gancho de reacción en un componente de clase
import React from 'react'; class Cias extends React.Component { componentDidMount() { const {valorToken} = this.props; return fetch('https://url-test-test.es/api_movil/test.php', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${valorToken}`, }, body: JSON.stringify({ token: valorToken, id_marca: '5', }), }) .then(response => response.json()) .then(responseJson => { this.setState( { isLoading: false, dataSource: responseJson, }, function () {}, ); }) .catch(error => { console.error(error); }); } } const CiasWrapper = () => { const {auth} = useAuth(); return <Cias valorToken={auth.token} />; }; export default CiasWrapper;pero como práctica recomendada, debe usar componentes funcionales para ganchos, puede implementar el mismo comportamiento con un componente de función como
import React, {useEffect, useState} from 'react'; import {View} from 'react-native'; const Cias = () => { const {auth} = useAuth(); const [isLoading, setIsLoading] = useState(true); const [dataSource, setDataSource] = useState(); useEffect(() => { fetch('https://url-test-test.es/api_movil/test.php', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${auth.token}`, }, body: JSON.stringify({ token: auth.token, id_marca: '5', }), }) .then(response => response.json()) .then(responseJson => { setDataSource(responseJson); setIsLoading(false); }) .catch(error => { console.error(error); }); }, []); return <View />; }; export default Cias;puede leer más sobre los componentes de la función y los ganchos en los documentos de reacción