Блог

Главная - Вопросы по программированию - Реагируйте, отвечайте с помощью нескольких консолей.вход

Реагируйте, отвечайте с помощью нескольких консолей.вход

#reactjs #axios #react-hooks #components #console.log

Вопрос:

Я создал функциональный компонент, и мой запрос axios ответил 2 неопределенными и 1 ответом 200. Я не понимаю, почему ?

Вот мой компонент :

 import { UidContext } from "../components/AppContext"
import React, { useContext, useEffect, useState } from "react"
import axios from "axios"

export default function Balance() {
    const uid = useContext(UidContext)
    const [userWallet, setUserWallet] = useState()

    useEffect(() => {
        if (uid !== null) {
            axios.get(`${process.env.REACT_APP_API_URL}api/balance/${uid}`)
                .then((res) => (setUserWallet(res.data[0])))
        }
    }, [uid]);

    console.log(userWallet);

    return (
        <section>
            Test
        </section>
    )
}

Вот ответ :
Результат

(ps : Я использую контекст React в своем App.js для хранения идентификатора пользователя)

Ответ №1:

Он console.log будет запускаться каждый раз, когда ваш компонент отображается, и ваш компонент повторно отображается каждый раз, когда происходит изменение реквизита, изменение состояния или, в данном случае, изменение контекста. Так что я верю, что это то, что происходит:

  1. Первый рендеринг вашего компонента («на монтировании»), пользовательский интерфейс не определен.
  2. Второй рендеринг вашего компонента («изменение контекста»), uid устанавливается Контекстами и, таким образом, запускает повторный рендеринг.
  3. В-третьих, рендеринг («из-за setUserWallet «), пользовательский интерфейс не определен.

Я хочу отметить, что я считаю, что ваш запрос выполняется только 1 раз. Если вы переместите консоль.войдите в then cb обещания axio, и вы увидите, что оно выполняется всего 1 раз, если объект uid не меняется часто, тогда каждый раз, когда uid изменяется, запрос будет вызываться снова

Комментарии:

1. Хорошо, большое вам спасибо, вы правы. В .затем он отображает только один журнал. То, как я это сделал, — это хороший способ ? Или есть что-то лучше оптимизированное ?

2. Нет проблем! Да! @JohanBRAZILLIER Я думаю, что одна вещь, которую вы могли бы сделать, чтобы ваш компонент стал немного чище, — это перенести всю логику извлечения в пользовательский хук, такой как useUserWallet, где у вас есть useContext, useState и useЭффект в одном и том же месте, и в компоненте баланса у вас будет просто: const userWallet = useUserWallet() . Таким образом, логика получения учетной записи пользователя не является ответственностью компонента баланса

3. Отличная идея. Большое спасибо

Метки: ,