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

在React.js中，可以使用状态（state）来跟踪组件的响应状态，并根据状态的不同显示相应的内容消息。下面是一个示例代码，演示了如何在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;

在上面的代码中，我们使用了React的useState钩子来定义了一个名为responseStatus的状态变量，并使用setResponseStatus函数来更新该状态。当点击"发起请求"按钮时，会调用fetchData函数，该函数使用fetch函数发起网络请求，并根据响应状态码更新responseStatus状态。

在组件的返回值中，我们使用了条件渲染（conditional rendering）来根据responseStatus的值显示相应的内容消息。只有当responseStatus有值时，才会渲染<p>元素来显示响应状态。

这个示例中并没有涉及到具体的腾讯云产品，因为在React.js中查看响应状态并显示相应的内容消息并不依赖于特定的云计算品牌商的产品。但是，你可以根据具体的需求选择适合的腾讯云产品来实现相关功能，例如使用腾讯云的云函数（SCF）来处理网络请求，使用腾讯云的对象存储（COS）来存储数据等。

希望这个答案能够满足你的需求。如果你有任何其他问题，请随时提问。