Tengo datos de tabla donde estoy obteniendo esos datos a través de API. Necesito mostrar un mensaje de error en la pantalla del usuario como si something went wrong .
Probé el siguiente código
const File history = () => { const [tableData, setTableData] = useState([]); const [isVisible, setIsVisible] = useState(true); const [errorMessage, setErrorMessage] = useState(''); const getFileHistoryData = async() => { try { const response = await axios.get("api"); const data = await response.data; if (data.length > 0) { setTableData(response.data); } } catch (e) { console.log(e.message) } }; const renderErrorMessage = () => { return( <div> {errorMessage !- & ( <h1>{'Something went wrong: + errorMessage}</h1> }} </div> ) } return ( <div> {this.renderErrorMessage()} <MyTableComponent/> </div> ); }¿Cómo muestro el error en la interfaz para mostrar el mensaje ya que es un componente funcional?
Como señalé en el comentario, debe cambiar la función para almacenar el estado de error y cambiar la función de representación para mostrar eso.
const File history = () => { const [tableData, setTableData] = useState([]); const [isVisible, setIsVisible] = useState(true); const [errorMessage, setErrorMessage] = useState(''); const getFileHistoryData = async() => { try { const response = await axios.get("api"); const data = await response.data; setErrorMessage(''); if (data.length > 0) { setTableData(response.data); } } catch (e) { console.log(e.message) setErrorMessage(e.message); } }; const renderErrorMessage = () => { return( <div> {errorMessage !== '' && ( <h1>{'Something went wrong: + errorMessage}</h1> }} </div> ) } return ( <div> {renderErrorMessage()} <MyTableComponent/> </div> ); }Podrías modificar tu código como tal:
import React, { Component } from 'react', import axios from 'axios', import MyTableComponent from 'YOUR_PATH_TO_THIS_COMPONENT', class File extends Component { state = { tableData : [], isVisible : true, errorMessage : '', } componentDidMount = () => { axios.get("api") .then(response => { const fileDataHistory = Object.values(response.data); if (data.length > 0) { this.setState({ tableData:fileDataHistory, }); } } .catch(error => { console.log(error); this.setState({ errorMessage:error, }); }; renderErrorMessage = () => { return( <div> {this.state.errorMessage !== '' && <h1>{'Something went wrong:' + this.state.errorMessage}</h1> } </div> ) }; render() { return ( <div> {this.renderErrorMessage()} <MyTableComponent/> </div> ) } };Puede usar un estado para almacenar el mensaje de error cuando ocurre un error y usar ese valor para mostrar el mensaje de error. En lugar de verificar si el mensaje de error existe en la función de representación del mensaje, también podría usar el operador && para representar el mensaje de forma condicional.
const File history = () => { const [tableData, setTableData] = useState([]); const [isVisible, setIsVisible] = useState(true); const [errorMessage, setErrorMessage] = useState(''); const getFileHistoryData = async() => { try { const response = await axios.get("api"); const data = await response.data; setErrorMessage(''); if (data.length > 0) { setTableData(response.data); } } catch (e) { console.log(e.message) setErrorMessage(e.message); } }; const renderErrorMessage = () => { return( <div> <h1>{`Something went wrong: ${errorMessage}`}</h1> </div> ) } return ( <div> {errorMessage.length && renderErrorMessage()} <MyTableComponent/> </div> ); }