Как упростить объект?

Question

Evelyn

node.js , react , nextjs

Как упростить объект?

Я разрабатываю многоязычность на Next.js 14 с использованием библиотеки next-intl. На сайте переключение языков функционирует, однако в консоли появляется ошибка: "Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported." 

Ниже приведена функция, которая вызывает данную ошибку: 
<pre><code class="javascript">const changeLanguage = (locale: Language) =&gt; {
        startTransition(async () =&gt; {
            try {
                await setLanguage(locale)
            } catch (error) {
                console.log(error)
            }
        })
    }</code></pre>

Эта функция асинхронно загружает необходимые переводы с сервера в формате JSON. Я также пробовал использовать вариант: 
<code class="javascript">JSON.parse(JSON.stringify(data))</code>, 
но это не решило проблему. Как мне устранить эту ошибку?

18 февраля 2025 г. 22:34

Ответы на вопрос 1

Похожие вопросы

Answer 1

Ошибка, с которой вы сталкиваетесь, связана с передачей объектов между серверными и клиентскими компонентами в Next.js. Она указывает на то, что вы пытаетесь передать объект, который не является "простым" (plain object) - например, классы, функции или объекты с прототипами, отличными от стандартного.

Для устранения этой ошибки, рассмотрите следующие рекомендации:

1. **Убедитесь, что `setLanguage` возвращает простой объект**: Проверьте, что данные, которые вы получаете от `setLanguage(locale)`, являются простыми объектами без каких-либо методов или нестандартных прототипов.

2. **Использование JSON**: Если ваша функция `setLanguage` возвращает сложную структуру данных, используйте `JSON.stringify` и `JSON.parse` для создания простого объекта:
   ```javascript
   const changeLanguage = (locale: Language) => {
       startTransition(async () => {
           try {
               const translatedData = await setLanguage(locale);
               const plainObject = JSON.parse(JSON.stringify(translatedData));
               // Используйте plainObject дальше по вашему коду
           } catch (error) {
               console.log(error);
           }
       });
   };
   ```

3. **Проверка данных**: Перед тем, как передавать объект в клиентский компонент, вы можете проверить тип объекта:
   ```javascript
   const isPlainObject = (obj) => {
       return obj && typeof obj === 'object' && obj.constructor === Object;
   }

   // Используйте это в вашей функции
   if (!isPlainObject(translatedData)) {
       console.warn('Получен неподдерживаемый тип данных:', translatedData);
   }
   ```

4. **Избегайте передачу функций или классов**: Убедитесь, что в ваше состояние (state) или контекст не передаются функции или классы. Переводы должны быть простыми объектами.

5. **Отладка**: Добавьте логи для вывода данных, которые вы собираетесь передать в клиентский компонент, чтобы понять, какие именно данные могут вызывать проблему.

6. **Проверка структуры данных**: Убедитесь, что JSON-объекты, полученные с сервера, не содержат лишних свойств или методов, которые могут нарушить условия.

7. **Используйте `useEffect` для изменения состояния**: Возможно, вместо вызова `startTransition` вы можете использовать `useEffect` для выполнения асинхронного кода, чтобы получить и обновить состояния.

Если после всех вышеуказанных советов проблема не решится, пожалуйста, предоставьте больше кода или контекста, чтобы более точно диагностировать проблему.