当 API 不工作时显示错误消息

Question

我有 table 数据，我正在通过 API 获取该数据。我需要在用户屏幕上显示一条错误消息，例如 something went wrong message

我尝试了下面的代码

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>  
     );
}

由于它是功能组件，因此如何在前端呈现消息中显示错误？

Answer 1

正如我在评论中指出的那样，您应该更改函数来存储错误状态，并更改渲染函数以显示错误状态。

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>  
     );
}

Answer 2

您可以这样修改您的代码：

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> 
    )
  }
};

Answer 3

您可以使用状态来存储错误发生时的错误消息，并使用该值来显示错误消息。除了检查消息呈现函数中是否存在错误消息之外，您还可以使用 && 运算符有条件地呈现消息。

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>  
     );
}

当 API 不工作时显示错误消息

Display an error message when API is not working

javascript

ecmascript-6

reactjs