Deepseek ArtifactsDeepseek Artifacts

解决数据获取失败

4.0
en
前端开发
React
useEffect
数据获取
错误处理

Prompt

check why failed to fecth here: 

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://www.technosysa.com/new_announce.php?id=${idParam}&mode=get_announce`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        });
        const data = await response.json();
        console.log(data);
        setItem({
          id: idParam,
          description: data.description,
          Name_person: data.Name_person,
          telefono: data.telefono,
          whatsapp: data.whatsapp,
          email: data.email,
          file_path_user_jpg: data.file_path_user_jpg,
        });
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
    fetchData();
  }, [idParam]);

Generated Result

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

const App = () => {
  const [item, setItem] = useState({});
  const idParam = 'exampleId'; // Replace with actual ID

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://www.technosysa.com/new_announce.php?id=${idParam}&mode=get_announce`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
        });
        const data = await response.json();
        console.log(data);
        setItem({
          id: idParam,
          description: data.description,
          Name_person: data.Name_person,
          telefono: data.telefono,
          whatsapp: data.whatsapp,
          email: data.email,
          file_path_user_jpg: data.file_path_user_jpg,
        });
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
    fetchData();
  }, [idParam]);

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4">
      <div className="bg-white shadow-lg rounded-lg p-6 max-w-md w-full">
        <h1 className="text-2xl font-bold mb-4 text-gray-800">Personal Information</h1>
        <div className="space-y-4">
          <div>
            <p className="text-gray-600"><span className="font-semibold">Name:</span> {item.Name_person}</p>
          </div>
          <div>
            <p className="text-gray-600"><span className="font-semibold">Phone:</span> {item.telefono}</p>
          </div>
          <div>
            <p className="text-gray-600"><span className="font-semibold">WhatsApp:</span> {item.whatsapp}</p>
          </div>
          <div>
            <p className="text-gray-600"><span className="font-semibold">Email:</span> {item.email}</p>
          </div>
          <div>
            <p className="text-gray-600"><span className="font-semibold">Description:</span> {item.description}</p>
          </div>
          {item.file_path_user_jpg && (
            <div className="flex justify-center">
              <img src={item.file_path_user_jpg} alt="User" className="rounded-full h-24 w-24 object-cover" />
            </div>
          )}
        </div>
      </div>
      <footer className="mt-8 text-center text-gray-500 text-sm">
        © 2025 Your Company. All rights reserved.
      </footer>
    </div>
  );
};

export default App;

More Recommendations

View All