Как правильно обработать данные get запрос?

Question

[kelwin27]

При получение данных с внешнего АПИ для дальнейшей валидации и размещения на странице возникает ошибка при попытке положить данные в useState переменную. Получается, что React пытается сформировать страницу до получения данных с АПИ. Подскажите пожалуйста, как это побороть.
Код запроса на АПИ:

import React from "react";
import axios from "axios";

export default function RouteQuestions() {
    const [questions, setQuestions] = React.useState([])
    
        React.useEffect(() => {
        axios.get("https://opentdb.com/api.php?amount=5&category=17&difficulty=easy&type=multiple")
        .then(response => setQuestions(response.data.results))

    }, [])

    return questions
}

место где осуществляется вызов и происходит ошибка(На данном этапе React пытается отрисовать страницу при помощи пустого массива.):

export default function Question() {
    
    const [questions, setQuestions] = React.useState(FilterQuestions()) // здесь происходит 
//постановка данных после их структурирования, однако вместо данных подставляется пустой массив

    return (
        <div className="allQ">
            <img src={blob} className="blob1" />
            <div className="textQ">
                {questions.map(item => <div key={item.id}>{QuestionItem(item)}</div>)}
            </div>
            <div>
                <button>Check answers</button>
            </div>
            <img src={blob_blue} className="blob2" />
        </div>
    )
}

Однако если я помещаю данные в переменную без отслеживания состояния questions = FilterQuestions() страница отрисовывается. Но дело в том, что в объекте, который передается находятся элементы состояния, которые я планировал менять в процессе работы в chiild элементах. Подскажите, будьте добры, как можно решить подобную ситуацию.

Comments

[Gary_Ihar]

ниче не понятно, но очень интересно

[kelwin27]

Gary_Ihar, Прошу прощения если плохо объясняю суть проблемы, я изучаю React и JS не так долго ( 2 недели ) и могу допускать неточности в терминах. Постараюсь более кратко: Из АПИ получаю данные. Далее в компоненте выбираю нужные мне и формирую из них массив объектов с необходимыми мне полями. Далее передаю данный массив в function Question() При попытке сформировать из массива передаваемых объектов useState элемент с контролируемым состоянием, происходит ошибка. При манипуляциях с кодом мне кажется что ошибка возникает на этапе получения данных. То есть до получения данных передается пустой массив и он ломает формирование страницы.
Вероятно я что-то не указываю и имеет смысл скинуть ссылку на гитхаб

Answer 1

[kelwin27]

Всем большое спасибо за ответы!
Ошибка была не там, где я думал. Уважаемый Kentavr16 правильно заметил на лишний элемент в декомпозиции, а именно упорядочивание результатов запроса. Я избавился от этого компонента. Get запрос на АПИ переписал как метод класса, а сам запрос обернул в async/await:

export default class RouteQuestions {
    static async getAll (){

        const response = await axios.get("https://opentdb.com/api.php?amount=5&category=17&difficulty=easy&type=multiple")

        const preQuestions = response.data.results
        const newQuestions = []
    
        for (let i = 0; i < preQuestions.length; i++) {
    
        const answ = [...preQuestions[i].incorrect_answers, preQuestions[i].correct_answer]
        const answers = []
    
        for (let i = 0; i < answ.length; i++){
            
            answers.push({
                value: answ[i],
                id: nanoid(),
                isHold: false
            })
        }
            newQuestions.push({
                answer: preQuestions[i].correct_answer,
                id: nanoid(),
                text: preQuestions[i].question,
                answers: answers
            })}
            return newQuestions
        }
    }

Обращение к данному методу обернул в useEffect и добился необходимой функциональности:

const [questions, setQuestions] = React.useState([])

    React.useEffect( () => { 
        async function fetchQuestions() {
            const questions = await RouteQuestions.getAll()
            setQuestions(questions)
        }
        fetchQuestions()
    }, [])

Буду очень благодарен, если кто-нибудь объяснит, почему код начал работать, заранее благодарен за ваше потраченное время.

Comments

[Kentavr16]

Я лучше дам пару наводок на то, как это может (или должно?) быть организовано в реакте.
1) Вы говорите о декомпозиции. Но ведь реакт фактически создан для удобной декомпозиции,и штатные методы, описанные в документации реакта, отличны и самодостаточны. Код разбивается в компоненты, и если разбивать правильно - ваш код не станет настолько большим и нечитаемым. При этом акцент на "разбивать правильно" - нужно почитать статьи, вникнуть в философию реакта и в то как в реакте "текут" данные. Понять когда компоненту нужен стейт, когда не нужен и т.д.
2) О

Get запрос на АПИ переписал как метод класса,

. Может код и работает, но для решения таких вопросов в реакте есть свое решение - кастомные хуки(это если вам очень хочется вынести получение данных в отдельный слой абстракции, так скажем). Я бы на вашем месте просто посмотрел, как можно упростить код, чтобы просто добавить его в юзЭффект одного из родительских компонентов. Не умножайте сущности.
Все написанное сводится к одному простому совету - читайте статьи про лучшие практики реакта, смотрите примеры хорошего кода. Если есть определенная задача, посмотрите как ее решают ваши коллеги в реакте - изобретать велосипед в таком случае скорее всего не потребуется.
Удачи в ваших начинаниях!

[kelwin27]

Благодарю

Answer 2

[n1ksON]

Можете использовать useLayoutEffect, либо выполнять проверку на длину и показывать иное, типа:

{array.length > 0 ? <div>content</div> : <div>empty</div>}

Comments

[kelwin27]

Очень интересное решение с блокированием работы браузера до выполнения кода в хуке. Обязательно попробую.

Answer 3

[Kentavr16]

Я не эксперт, но насколько я понимаю ваш код это плохая практика. Вы создаете компонент(!) который существует только для того чтобы сделать запрос и вернуть полученные данные. Подобная работа для обычных функций, а не компонентов. Просто совершайте запрос к сети в том компоненте, который будет использовать ответ. Если ответ сервера будут использовать несколько компонентов - делайте запрос в их родителе и распространяйте все через пропсы. Чтобы реакт не отрисовывал пока еще пустой стейт можно использовать условный рендеринг - если стейт null - вернуть какой-то прелоадер, если стейт обновлен данными из сети - отрисовать полноценный компонент.

Comments

[kelwin27]

Мне казалось декомпозиция является хорошей практикой для читаемости кода, а нагромождение функций с разным назначением ( в моем случае получение данных, формирование из нужных мне нового объекта с необходимыми полями и затем отрисовка данных на странице) сделает код менее читаемым.
Я задумывался на вопрос прелоадера, но меня смущает что даже при изменении значения в FilterQuestions() значение в questions не меняется. Расставлял в коде console.log(). Завтра рассмотрю вопрос прелоадера и обязательно отпишусь о результате.