Ошибка: "Объекты недопустимы как дочерние элементы React"

Ошибка: “Объекты недопустимы как дочерние элементы React”

На чтение 3 мин Опубликовано 17.09.2024

Содержание

Вопрос или проблема
Ответ или решение
Объяснение кода:

Вопрос или проблема

Когда родительский компонент вызывает компонент SearchWord, который находится внизу (второй блок кода), я получаю ошибку “Ошибка: Объекты недопустимы как дочерний элемент React”. Если я удаляю все внутри этого компонента и просто оставляю функцию “async”, ошибка все равно появляется.

Если я удаляю слово “async”, ошибка исчезает. Я определенно не возвращаю никаких дочерних элементов, которые являются объектами. Я даже могу удалить оператор return в компоненте SearchWord, и ошибка все равно появится.

В чем проблема?

Это родительский компонент.

import SearchWord from '../api';

function ShowTranslation({ word }) {    
    return <div>
        <SearchWord word={word} />
    </div>
}

export default ShowTranslation;

Это компонент SearchWord:

import axios from 'axios';

const SearchWord = async ({ word }) => {
    const response = await axios.get(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);

    return response.data[0].meanings[0].definitions[0].definition; // РЕЗУЛЬТАТ ЭТОГО ЯВЛЯЕТСЯ СТРОКОЙ
};

export default SearchWord;

Ответ или решение

Ошибка “Objects are not valid as a React child” возникает, когда вы пытаетесь вернуть из компонента что-то, что React не может отобразить. В вашем случае проблема связана с тем, что вы используете асинхронную функцию как компонент React, но это не является корректным подходом.

Когда вы устанавливаете SearchWord как асинхронную функцию, React не может обработать его как компонент, и возникает ошибка. Компоненты React должны либо возвращать JSX, либо null, но не могут вернуть Promise (что происходит, когда вы используете async).

Вот правильный способ решения вашей проблемы. Вам нужно разделить логику асинхронного запроса и рендеринг. Чтобы справиться с асинхронным запросом, вы можете использовать useEffect и useState в функциональном компоненте. Вот как это можно сделать:

// Parent Component
import SearchWord from '../api';

function ShowTranslation({ word }) {
    return (
        <div>
            <SearchWord word={word} />
        </div>
    );
}

export default ShowTranslation;

// SearchWord Component
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const SearchWord = ({ word }) => {
    const [definition, setDefinition] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchDefinition = async () => {
            try {
                const response = await axios.get(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
                setDefinition(response.data[0].meanings[0].definitions[0].definition);
            } catch (err) {
                setError(err);
            } finally {
                setLoading(false);
            }
        };

        fetchDefinition();
    }, [word]);

    if (loading) {
        return <div>Loading...</div>;
    }

    if (error) {
        return <div>Error: {error.message}</div>;
    }

    return <div>{definition}</div>;
};

export default SearchWord;

Объяснение кода:

useState: Используется для хранения состояния, включая определение слова, статус загрузки и возможные ошибки.
useEffect: Редактирует эффект, который выполняет асинхронный запрос при изменении word.
Обработка состояний: Отображается индикатор загрузки, если данные еще загружаются, и сообщение об ошибке при возникновении ошибки, прежде чем отображать определение.

Таким образом, вы преобразовали асинхронную логику в код, подходящий для React, устранив ошибку.