تحديث المصفوفات والكائنات في حالة React دون تعديلها

في React تحدّث مصفوفة أو كائنًا في الحالة بصنع واحد جديد وتمريره إلى دالة الضبط. لا تغيّر القيمة الموجودة في مكانها أبدًا: استخدم النشر (...) أو map أو filter أو slice لبناء نسخة فيها تغييرك، ثم استدعِ setItems(copy).

import { useState } from 'react';

let nextId = 3;

export default function App() {
    const [items, setItems] = useState([
        { id: 1, name: 'Milk' },
        { id: 2, name: 'Bread' },
    ]);
    const [name, setName] = useState('Eggs');

    function add() {
        setItems([...items, { id: nextId++, name }]);
        setName('');
    }

    function remove(id) {
        setItems(items.filter((item) => item.id !== id));
    }

    return (
        <div>
            <input value={name} onChange={(e) => setName(e.target.value)} />
            <button onClick={add}>Add</button>
            <ul>
                {items.map((item) => (
                    <li key={item.id}>
                        {item.name} <button onClick={() => remove(item.id)}>x</button>
                    </li>
                ))}
            </ul>
        </div>
    );
}

[...items, { ... }] مصفوفة جديدة فيها عنصر إضافي، وfilter تُرجع مصفوفة جديدة دون العنصر المحذوف. وكلاهما يترك المصفوفة القديمة على حالها.

لماذا لا يؤدي التعديل المباشر إلى العرض

عندما تستدعي دالة ضبط، تقارن React القيمة الجديدة بالقديمة باستخدام Object.is. في المصفوفات والكائنات تقارن هذه المراجع لا المحتويات. إذا غيّرت مصفوفة بـ push ومررت المصفوفة نفسها من جديد، ترى React المرجع نفسه، فتقرر أن شيئًا لم يتغير، وتتخطى العرض.

import { useState } from 'react';

export default function App() {
    const [items, setItems] = useState(['a']);

    function addByMutating() {
        items.push('mutated');
        setItems(items);
        console.log('pushed, length is now', items.length);
    }

    function addByCopying() {
        const next = [...items, 'copied'];
        setItems(next);
        console.log('spread: same array?', Object.is(items, next));
    }

    console.log('render', items.join(', '));

    return (
        <div>
            <button onClick={addByMutating}>push (mutates)</button>
            <button onClick={addByCopying}>spread (copies)</button>
            <p>{items.join(', ')}</p>
        </div>
    );
}

انقر "push" بضع مرات. تُظهر وحدة التحكم المصفوفة تكبر، لكن لا يظهر سطر عرض جديد ويبقى النص a. ثم انقر "spread": يحدث عرض واحد وتظهر كل العناصر المضافة دفعة واحدة، لأنها كانت في المصفوفة طوال الوقت. التعديل المباشر لا يرمي خطأ، بل يترك الشاشة قديمة حتى يطلق شيء آخر عرضًا. انقر "push" مرة أخرى بعد ذلك وقد يُعرض هذه المرة: لا تستطيع React دائمًا تخطي العمل مسبقًا، فيظهر التعديل أحيانًا ولا يظهر أحيانًا أخرى. وعدم القدرة على التنبؤ هذا هو سبب عدم تعديل الحالة مباشرة.

المصفوفات: توابع تستخدمها وأخرى تتجنبها

القاعدة بسيطة: استخدم التوابع التي تُرجع مصفوفة جديدة، وتجنّب التوابع التي تغيّر المصفوفة التي تُستدعى عليها.

toSorted وtoReversed وtoSpliced وwith توابع مصفوفات أحدث (ES2023)، مدعومة في كل المتصفحات الرئيسية الحالية منذ 2023. تؤدي المهمة نفسها التي تؤديها نظيراتها المعدِّلة، لكن على نسخة.

تحديث عنصر واحد بـ map

لتغيير عنصر واحد، مرّ على المصفوفة بـ map وأرجع كائنًا جديدًا للعنصر الذي تريده، والكائن الأصلي لكل عنصر آخر.

import { useState } from 'react';

export default function App() {
    const [todos, setTodos] = useState([
        { id: 1, text: 'Learn useState', done: true },
        { id: 2, text: 'Learn map', done: false },
        { id: 3, text: 'Build an app', done: false },
    ]);

    function toggle(id) {
        setTodos(
            todos.map((todo) =>
                todo.id === id ? { ...todo, done: !todo.done } : todo
            )
        );
    }

    return (
        <ul>
            {todos.map((todo) => (
                <li key={todo.id}>
                    <button onClick={() => toggle(todo.id)}>
                        {todo.done ? 'Undo' : 'Done'}
                    </button>{' '}
                    <span style={{ textDecoration: todo.done ? 'line-through' : 'none' }}>
                        {todo.text}
                    </span>
                </li>
            ))}
        </ul>
    );
}

الجزء { ...todo, done: !todo.done } مهم. من الأخطاء الشائعة نسخ المصفوفة مع تغيير الكائن الذي بداخلها:

const next = [...todos];
next[0].done = true; // next is new, but next[0] is the same object as todos[0]
setTodos(next);

هذا يُعرض، فيبدو سليمًا، لكن المصفوفة القديمة والجديدة تتشاركان الآن كائنًا متغيرًا. أي شيء يقارن العنصر القديم بالجديد (ابن ملفوف بـ React.memo، أو تأثير يعتمد على العنصر) لا يرى أي فرق. انسخ العنصر الذي تغيّره.

الإدراج عند فهرس

لا يوجد insert غير معدِّل، لذا اقطع المصفوفة نصفين وضع العنصر الجديد بينهما. ويؤدي toSpliced(index, 0, item) الشيء نفسه في استدعاء واحد.

import { useState } from 'react';

export default function App() {
    const [letters, setLetters] = useState(['A', 'B', 'D', 'E']);
    const [index, setIndex] = useState(2);

    function insert() {
        const next = [
            ...letters.slice(0, index),
            'C',
            ...letters.slice(index),
        ];
        console.log('before:', letters.join(''), 'after:', next.join(''));
        setLetters(next);
    }

    return (
        <div>
            <label>
                Index{' '}
                <input
                    type="number"
                    value={index}
                    onChange={(e) => setIndex(Number(e.target.value))}
                    style={{ width: 50 }}
                />
            </label>{' '}
            <button onClick={insert}>Insert C</button>
            <p style={{ fontSize: 24, letterSpacing: 4 }}>{letters.join('')}</p>
        </div>
    );
}

اضبط الفهرس على 0 وأدرج مرة أخرى: يذهب C الجديد إلى البداية. استبدل التعبير next بـ letters.toSpliced(index, 0, 'C') فتكون النتيجة نفسها.

الترتيب والعكس

يغيّر sort وreverse المصفوفة التي يُستدعيان عليها، رغم أنهما يُرجعانها أيضًا. وهذا يجعل setItems(items.sort()) تعديلًا مباشرًا يتبعه ضبط بالمرجع نفسه، وهو الخطأ الذي بدأت به هذه الصفحة. رتّب نسخة بدلًا من ذلك.

import { useState } from 'react';

export default function App() {
    const [scores, setScores] = useState([42, 7, 19, 88, 3]);

    function sortAscending() {
        const sorted = scores.toSorted((a, b) => a - b);
        console.log('original still', scores.join(' '));
        setScores(sorted);
    }

    function reverse() {
        setScores([...scores].reverse());
    }

    return (
        <div>
            <button onClick={sortAscending}>Sort</button>
            <button onClick={reverse}>Reverse</button>
            <p>{scores.join(' ')}</p>
        </div>
    );
}

يعمل [...scores].reverse() لأن النشر يصنع النسخة أولًا ثم لا يغيّر reverse إلا تلك النسخة.

تحديث الكائنات والكائنات المتداخلة

تتبع الكائنات القاعدة نفسها. انشر الكائن القديم في كائن جديد وتجاوز الحقول التي تتغير. وفي الكائن المتداخل، انشر عند كل مستوى في الطريق إلى الحقل: النشر الواحد لا ينسخ إلا المستوى الأعلى، فيبقى الكائن الداخلي هو القديم.

import { useState } from 'react';

export default function App() {
    const [user, setUser] = useState({
        name: 'Ada',
        address: { city: 'London', country: 'UK' },
    });

    function moveTo(city, country) {
        const next = {
            ...user,
            address: { ...user.address, city, country },
        };
        console.log('user copied:', next !== user);
        console.log('address copied:', next.address !== user.address);
        setUser(next);
    }

    return (
        <div>
            <input
                value={user.name}
                onChange={(e) => setUser({ ...user, name: e.target.value })}
            />
            <p>
                {user.name} lives in {user.address.city}, {user.address.country}.
            </p>
            <button onClick={() => moveTo('Oslo', 'Norway')}>Move to Oslo</button>
        </div>
    );
}

كل مستوى تنسخه كائن جديد؛ وكل مستوى لا تلمسه يبقى الكائن نفسه. وهذا ما يجعل النشر رخيصًا: لو احتوت الحالة أيضًا على قائمة طويلة من الطلبات، لنسخ { ...user } المرجع إلى القائمة لا القائمة نفسها.

إذا كان كائن في الحالة متداخلًا بعمق ثلاثة أو أربعة مستويات وظللت تكتب سلاسل طويلة من النشر، فهذه غالبًا علامة على أن الحالة يمكن أن تكون أكثر تسطحًا. تخزين العناصر في جدول بحث حسب المعرّف، أو تقسيم كائن كبير إلى عدة استدعاءات لـ useState، يُبقي كل تحديث قصيرًا. وعندما تغيّر أحداث كثيرة بنية واحدة، يساعد المختزل أيضًا (راجع useReducer).

structuredClone مقابل النشر

يصنع structuredClone(user) نسخة عميقة في استدعاء واحد، فيمكنك بعدها تغيير النسخة بحرية:

const next = structuredClone(user);
next.address.city = 'Oslo';
setUser(next);

هذا صحيح، لكنه ينسخ الكائن كله في كل مرة، بما في ذلك الأجزاء التي لم تغيّرها. هذا يكلّف وقتًا مع الحالة الكبيرة، ويعني أن كل كائن متداخل يحصل على مرجع جديد، فيُعاد عرض ابن محفوظ يستقبل user.orders رغم أن الطلبات لم تتغير. ويرمي structuredClone أيضًا خطأ مع الدوال، وتعود نسخ الأصناف ككائنات عادية. أما النشر فلا ينسخ إلا المسار الذي تغيّره، ولهذا هو الخيار المعتاد؛ واحتفظ بـ structuredClone للتحديث النادر الذي يعيد كتابة معظم الكائن فعلًا.

كتابة التعديلات باستخدام Immer

Immer مكتبة صغيرة تتيح لك كتابة كود يبدو كتعديل مباشر. تسلّمك مسودة، وتسجّل ما تغيّره، وتنتج قيمة جديدة غير قابلة للتعديل لا يُنسخ فيها إلا الأجزاء المتغيرة. وتغلّفها الحزمة use-immer في خطاف:

import { useImmer } from 'use-immer';

function Profile() {
    const [user, updateUser] = useImmer({
        name: 'Ada',
        address: { city: 'London' },
    });

    function moveTo(city) {
        updateUser((draft) => {
            draft.address.city = city;
        });
    }
    // ...
}

Immer غير متاحة في محررات هذه الصفحة، التي لا تحمّل إلا React. وتستحق الإضافة عندما تكون حالتك متداخلة بعمق ويصعب قراءة النشر. أما للحالة المسطحة فيكفي النشر العادي وmap، وهما ما ستراه في معظم كود React.