如何在react js中查看响应状态并显示相应的内容消息

import React, { useState } from 'react';

function App() {
  const [responseStatus, setResponseStatus] = useState(null);

  const fetchData = async () => {
    try {
      // 发起网络请求或其他异步操作
      // 这里假设请求返回一个响应状态码
      const response = await fetch('https://api.example.com/data');
      const status = response.status;

      // 根据响应状态码设置相应的状态
      if (status === 200) {
        setResponseStatus('成功');
      } else if (status === 404) {
        setResponseStatus('未找到');
      } else {
        setResponseStatus('其他错误');
      }
    } catch (error) {
      console.error('请求出错:', error);
      setResponseStatus('请求出错');
    }
  };

  return (
    <div>
      <button onClick={fetchData}>发起请求</button>
      {responseStatus && <p>响应状态: {responseStatus}</p>}
    </div>
  );
}

export default App;