تصحيح تطبيقات React باستخدام Cursor: الأدوات والنصائح وسير العمل

قد يكون تصحيح تطبيقات React أمرًا صعبًا بسبب التسلسل الهرمي للمكونات وتعقيد إدارة الحالة وتدفقات البيانات غير المتزامنة. مع أدوات التصحيح المدمجة في Cursor ودعم الذكاء الاصطناعي، يمكنك تحديد المشاكل وإصلاحها بشكل أسرع. يغطي هذا الدليل سير عمل محددة لتصحيح React.

المتطلبات الأساسية

قبل البدء، ستحتاج إلى:

• تثبيت Cursor (الإصدار الأحدث)
• مشروع React مُعد
• تثبيت ملحق React DevTools في المتصفح (اختياري لكن موصى به)

إعداد التصحيح في Cursor

تكوين Launch

أنشئ .vscode/launch.json لتصحيح React:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug React App",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/src/*"
      }
    },
    {
      "name": "Debug Next.js",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "env": {
        "NODE_OPTIONS": "--inspect"
      },
      "console": "integratedTerminal"
    }
  ]
}

خرائط المصدر

تأكد من تمكين خرائط المصدر في تكوين البناء:

// vite.config.ts
export default defineConfig({
  build: {
    sourcemap: true,
  },
});

// next.config.js
const nextConfig = {
  productionBrowserSourceMaps: true,
};
module.exports = nextConfig;

تصحيح مكونات React

نقاط التوقف في JSX

عيّن نقاط توقف مباشرة في ملفات المكونات:

// src/components/UserProfile.tsx
import { useState, useEffect } from 'react';

export function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchUser() {
      setLoading(true);
      const response = await fetch(`/api/users/${userId}`);
      // عيّن نقطة توقف هنا
      const data = await response.json();
      setUser(data);
      setLoading(false);
    }

    fetchUser();
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  if (!user) return <div>User not found</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

نقاط التوقف الشرطية

انقر بزر الماوس الأيمن على نقطة التوقف لتعيين شرط:

Condition: userId === "12345"

سيتم تشغيل نقطة التوقف فقط عند استيفاء الشرط.

تقنيات تصحيح الحالة

تسجيل الطرفية مع السياق

استخدم ذكاء Cursor الاصطناعي لإضافة سجلات استراتيجية:

أضف console.log لتتبع تغييرات الحالة في هذا المكون

يضيف Cursor:

useEffect(() => {
  console.log('[UserProfile] userId changed:', userId);

  async function fetchUser() {
    console.log('[UserProfile] fetching user...');
    const response = await fetch(`/api/users/${userId}`);
    const data = await response.json();
    console.log('[UserProfile] received data:', data);
    setUser(data);
  }

  fetchUser();
}, [userId]);

التكامل مع React DevTools

يعمل React DevTools في المتصفح، لكن يمكنك الرجوع إلى بيانات المكونات في Cursor:

1. افتح React DevTools في المتصفح
2. افحص شجرة المكونات
3. انسخ props/state للمكون
4. الصقه في محادثة Cursor للتحليل

يعيد هذا المكون العرض بشكل لا نهائي. الـ props وstate من DevTools هما:
[الصق البيانات]

ما الذي يسبب الحلقة؟

حل مشاكل Hooks

تبعيات useEffect

مشكلة شائعة: مصفوفة التبعيات غير مكتملة أو غير صحيحة.

// Before - buggy
useEffect(() => {
  fetchData(query);
}, []); // Missing dependency

// After - fixed
useEffect(() => {
  fetchData(query);
}, [query]); // Correct dependency

اطلب من Cursor مراجعة Hooks الخاصة بك:

راجع جميع Hooks useEffect في هذا الملف بحثًا عن تبعيات مفقودة

تصحيح Hooks المخصصة

// src/hooks/useLocalStorage.ts
import { useState, useEffect, useCallback } from 'react';

export function useLocalStorage<T>(key: string, initialValue: T) {
  // الحصول على القيمة المخزنة
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(`Error reading localStorage key "${key}":`, error);
      return initialValue;
    }
  });

  // إرجاع نسخة ملفوفة من دالة setter الخاصة بـ useState
  const setValue = useCallback(
    (value: T | ((val: T) => T)) => {
      try {
        const valueToStore = value instanceof Function ? value(storedValue) : value;
        setStoredValue(valueToStore);
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      } catch (error) {
        console.error(`Error setting localStorage key "${key}":`, error);
      }
    },
    [key, storedValue]
  );

  return [storedValue, setValue] as const;
}

انتهاكات قواعد Hooks

يمكن لـ Cursor اكتشاف انتهاكات قواعد Hooks الشائعة، مثل استدعاء Hooks بشكل شرطي أو داخل الحلقات. استخدم تكامل linter للالتقاط المبكر.

تصحيح Next.js

تصحيح جانب الخادم

تصحيح خطوط API ومكونات الخادم:

{
  "name": "Debug Next.js Server",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "npx",
  "runtimeArgs": ["next", "dev"],
  "env": {
    "NODE_OPTIONS": "--inspect=9230"
  },
  "port": 9230
}

نقاط توقف في خطوط API

// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  // عيّن نقطة توقف هنا
  const users = await prisma.user.findMany();

  // افحص users في المصحح
  return NextResponse.json({ users });
}

جانب العميل مقابل جانب الخادم

السياق	نهج التصحيح
مكونات العميل	Chrome DevTools، React DevTools
مكونات الخادم	مصحح Node.js في Cursor
خطوط API	مصحح Node.js
الوسيطة	سجلات الطرفية + مصحح Node.js

مشاكل React الشائعة والحلول

إعادة العرض اللانهائية

العرض: يتجمد المتصفح وتظهر سجلات متكررة في الطرفية.

// Problem: every render creates new object reference
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <Child config={{ limit: 10 }} /> // New object every render!
  );
}

// Solution: memoize the config
function Parent() {
  const [count, setCount] = useState(0);
  const config = useMemo(() => ({ limit: 10 }), []);

  return <Child config={config} />;
}

الإغلاقات القديمة

// Problem: callback captures old state
function Counter() {
  const [count, setCount] = useState(0);

  const logCount = useCallback(() => {
    console.log(count); // Always logs initial value
  }, []); // Missing dependency

  // Solution: use functional updates or include dependency
  const logCountFixed = useCallback(() => {
    console.log(count);
  }, [count]);
}

تسريبات الذاكرة

// Problem: state update after unmount
useEffect(() => {
  let isMounted = true;

  fetchData().then(data => {
    if (isMounted) {
      setData(data);
    }
  });

  return () => {
    isMounted = false;
  };
}, []);

التصحيح باستخدام ذكاء Cursor الاصطناعي

تحليل الأخطاء

الصق رسائل الخطأ في Cursor:

أحصل على هذا الخطأ في تطبيق React:
"Cannot read properties of undefined (reading 'map')"

كود المكون هو:
[الصق الكود]

ما الخطأ وكيف أصلحه؟

تصحيح الأداء

يعيد هذا المكون العرض ببطء. الكود ولقطة شاشة من React DevTools Profiler هما:
[الصق الكود]

كيف يمكنني تحسينه؟

التحسينات الشائعة التي يقترحها Cursor:

• استخدام useMemo لتذكر الحسابات المكلفة
• منع إعادة العرض غير الضرورية باستخدام React.memo
• افتراض القوائم الطويلة
• تقسيم المكونات الكبيرة

تصحيح إدارة الحالة

Redux DevTools

تكوين Redux DevTools في التطوير:

// store.ts
import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {
    user: userReducer,
    cart: cartReducer,
  },
  devTools: process.env.NODE_ENV !== 'production',
});

فحص مخزن Zustand

// Debug Zustand store
import { useUserStore } from './stores/userStore';

// In browser console
const userStore = useUserStore.getState();
console.log(userStore);

اختبار المكونات قبل التصحيح

// src/components/__tests__/UserProfile.test.tsx
import { render, screen, waitFor } from '@testing-library/react';
import { UserProfile } from '../UserProfile';

describe('UserProfile', () => {
  it('handles loading state', () => {
    render(<UserProfile userId="1" />);
    expect(screen.getByText('Loading...')).toBeInTheDocument();
  });

  it('handles error state', async () => {
    render(<UserProfile userId="invalid" />);
    await waitFor(() => {
      expect(screen.getByText('User not found')).toBeInTheDocument();
    });
  });
});

قائمة مرجعية للتصحيح

المشكلة	ما يجب التحقق منه أولاً
المكون لا يُعرض	التحقق من الإرجاعات الشرطية وحالات التحميل
الحالة لا تُحدث	التحقق من استدعاءات setState ومصفوفات التبعيات
الخصائص غير معرّفة	التحقق من تمرير الخصائص من المكون الأب
فشل استدعاءات API	التحقق من علامة تبويب الشبكة وحدود الأخطاء
أداء بطيء	التحقق من إعادة العرض غير الضرورية
أخطاء الأنواع	التأكد من تطابق واجهات TypeScript مع البيانات

اختصارات لوحة المفاتيح للتصحيح

الإجراء	الاختصار
تبديل نقطة التوقف	F9
بدء التصحيح	F5
Step over	F10
Step into	F11
Step out	Shift + F11
الاستمرار	F5
فتح وحدة تحكم التصحيح	Ctrl + Shift + Y

موارد ذات صلة

• دليل الاختبار في Cursor
• دليل تطوير واجهات برمجة التطبيقات في Cursor
• دليل Docker في Cursor

آخر تحديث: يوليو 2025