כתיבת קוד — שיעור 17

React: קומפוננטות, State ו-Props

כל 2 משימות הקוד שנשמרו מהשיעור מופיעות כאן, עם דרישות, דוגמאות וקוד פתיחה. אפשר לכתוב פתרון בעורך המקומי וללחוץ על „בדיקת AI” לקבלת ציון, רמזים והערות.

T2 · בסיסי200 נק'~15 דק'debug

תיקון באג — אל תשנה state (immutability)

הפונקציה מדמה עדכוני state ב-React ומחזירה היסטוריה של המצבים אחרי כל פעולה. אך היא שוברת את כלל-הזהב של React: היא *משנה* את אותו אובייקט state במקום ליצור חדש, ולכן כל רשומות ההיסטוריה מצביעות לאותו אובייקט ומראות את הערך הסופי. תקן כך שכל צעד יפיק עותק חדש (state בלתי-משתנה).

// הקוד השבור לתיקון

def apply_actions(initial, actions):
    state = initial; history = []
    for a in actions:
        if a['type'] == 'inc':   state['count'] += a.get('by', 1)
        elif a['type'] == 'reset': state['count'] = 0
        history.append(state)     # באג כאן
    return history

דוגמאות

apply_actions({'count':0}, [{'type':'inc','by':1}, {'type':'inc','by':2}]) → [{'count': 1}, {'count': 3}]

פתרון-ייחוס תיקון באג — אל תשנה state (immutability) ›

def apply_actions(initial, actions):
    state = dict(initial); history = []
    for a in actions:
        state = dict(state)               # התיקון: עותק חדש בכל צעד (אי-שינוי state)
        if a['type'] == 'inc':   state['count'] += a.get('by', 1)
        elif a['type'] == 'reset': state['count'] = 0
        history.append(state)
    return history

הפתרון שלךהפתרון נשמר מקומית אוטומטית.

T3 · בינוני350 נק'~25 דק'algorithmic

useReducer — ניהול רשימת משימות

ממש reducer בסגנון useReducer של React לניהול רשימת משימות. מצב התחלתי: {'todos': [], 'nextId': 1}. עבד רשימת actions לפי הסדר: {'type':'add','text':t} מוסיף משימה {'id':nextId,'text':t,'done':False} ומקדם nextId · {'type':'toggle','id':i} הופך done · {'type':'remove','id':i} מסיר · {'type':'clear_done'} מסיר את כל שהושלמו. החזר את המצב הסופי.

דוגמאות

add 'x', add 'y', toggle id=1, clear_done → {'todos': [{'id':2,'text':'y','done':False}], 'nextId': 3}

פתרון-ייחוס useReducer — ניהול רשימת משימות ›

def run_reducer(actions):
    state = {'todos': [], 'nextId': 1}
    for a in actions:
        ty = a['type']
        if ty == 'add':
            state['todos'].append({'id': state['nextId'], 'text': a['text'], 'done': False})
            state['nextId'] += 1
        elif ty == 'toggle':
            for td in state['todos']:
                if td['id'] == a['id']: td['done'] = not td['done']
        elif ty == 'remove':
            state['todos'] = [td for td in state['todos'] if td['id'] != a['id']]
        elif ty == 'clear_done':
            state['todos'] = [td for td in state['todos'] if not td['done']]
    return state

הפתרון שלךהפתרון נשמר מקומית אוטומטית.