React 数据获取教程

4.0

15/6/2025

zh前端技术React数据获取前端开发

Prompt

import React, { useState, useEffect } from 'react';

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch('https://www.technosysa.com/new_announce.php?mode=get_announce&id=17');
      const jsonData = await response.json();
      setData(jsonData);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  return (
    <div className="App">
      <header className="bg-blue-600 p-4">
        <h1 className="text-white text-2xl font-bold">Announcement</h1>
      </header>
      <main className="p-4">
        {data ? (
          <div className="bg-white shadow-lg rounded-lg p-6">
            <h2 className="text-xl font-semibold mb-4">{data.title}</h2>
            <p className="text-gray-700">{data.content}</p>
          </div>
        ) : (
          <p className="text-gray-700">Loading...</p>
        )}
      </main>
      <footer className="bg-gray-800 p-4 mt-8">
        <p className="text-white text-center">© 2025 TechnoSys. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;

Resultado Generado

import React, { useState, useEffect } from 'react';

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch('https://www.technosysa.com/new_announce.php?mode=get_announce&id=17');
      const jsonData = await response.json();
      setData(jsonData);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  return (
    <div className="App">
      <header className="bg-blue-600 p-4">
        <h1 className="text-white text-2xl font-bold">Announcement</h1>
      </header>
      <main className="p-4">
        {data ? (
          <div className="bg-white shadow-lg rounded-lg p-6">
            <h2 className="text-xl font-semibold mb-4">{data.title}</h2>
            <p className="text-gray-700">{data.content}</p>
          </div>
        ) : (
          <p className="text-gray-700">Loading...</p>
        )}
      </main>
      <footer className="bg-gray-800 p-4 mt-8">
        <p className="text-white text-center">© 2025 TechnoSys. All rights reserved.</p>
      </footer>
    </div>
  );
};

export default App;

Open Sandbox

Más Recomendaciones

Ver Todo

CSS 按钮样式优化

前端技术en

4.0

generating this style flex items-center bg-green-500 text-white px-6 py-3 rounded-full shadow-lg hover:bg-green-600 transition duration-300 ease-in-out transform hover:-translate-y-1

CSS按钮样式前端开发14/6/2025

文本样式优化

前端技术en

4.0

block text-sm font-medium text-gray-700 mb-1

CSS样式设计前端开发12/6/2025

表单验证技巧

前端技术en

4.0

obtain className="product-info"> and className="payer-data-form", no use tailwind with validation fields

表单验证前端开发HTML12/6/2025

文章对话框CSS样式

前端技术zh

4.0

/* 文章页面对话框样式 */ .article-chat-container { background: var(--secondary-color); padding: 1.5rem; border-radius: var(--border-radius); box-shadow: var(--box-shadow); margin-top: 1.5rem; } .article-chat-history { height: var(--chat-history-height); overflow-y: auto; padding: 1rem; background-color: white; border-radius: var(--border-radius); margin-bottom: 1rem; } .article-message { margin-bottom: 1rem; display: flex; max-width: 85%; } .article-message.user { align-self: flex-end; justify-content: flex-end; margin-left: auto; } .article-message.ai { align-self: flex-start; } .article-message-content { padding: 1rem 1.2rem; border-radius: var(--message-border-radius); box-shadow: var(--message-shadow); } .user .article-message-content { background-color: var(--primary-color); color: white; border-bottom-right-radius: 4px; } .ai .article-message-content { background-color: var(--ai-message-bg); color: var(--text-color); border-bottom-left-radius: 4px; } .article-chat-input { display: flex; gap: 10px; } .article-chat-input textarea { flex: 1; border: 1px solid var(--border-color); border-radius: 20px; padding: 12px 15px; resize: none; font-family: inherit; font-size: 1rem; } .article-chat-input button { background-color: var(--primary-color); color: white; border: none; border-radius: 20px; padding: 0 1.5rem; cursor: pointer; font-weight: 500; transition: background-color 0.2s; } .article-chat-input button:hover { background-color: #0069d9; } .article-chat-input button:disabled { background-color: #cccccc; cursor: not-allowed; }

CSS前端开发UI设计27/3/2025