AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • 主页
  • 系统&网络
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • 主页
  • 系统&网络
    • 最新
    • 热门
    • 标签
  • Ubuntu
    • 最新
    • 热门
    • 标签
  • Unix
    • 最新
    • 标签
  • DBA
    • 最新
    • 标签
  • Computer
    • 最新
    • 标签
  • Coding
    • 最新
    • 标签
主页 / coding / 问题 / 76921632
Accepted
Rifat Cholakov
Rifat Cholakov
Asked: 2023-08-17 20:40:40 +0800 CST2023-08-17 20:40:40 +0800 CST 2023-08-17 20:40:40 +0800 CST

React Context 值不会在 useEffect 中更新

  • 772

我正在使用 React 和 Typescript。

即使我正在更新 .log 文件中的值,当我 consoloe.log 时,它initialData仍然保持不变。nulluseEffet

为什么这段代码会在循环中不断发出请求?

这是我的context:

import React, {
    Dispatch,
    SetStateAction,
    createContext,
    useContext,
    useState,
} from 'react';

interface InitialDataType {
    GameName: string;
    GameUrl: string;
    HasRegulation: boolean;
    HideNavBar: boolean;
    HideSessionNetLoss: boolean;
    HideSessionTimer: boolean;
    RegulationAction: string;
    RegulationModel?: string;
    TournamentId?: number;
    TournamentType?: number;
    TournamentsBaseUrl?: string;
    Url: string;
    VendorController: string;
}

interface InitialDataContextInterface {
    initialData: InitialDataType | null;
    setInitialData: Dispatch<SetStateAction<InitialDataType | null>>;
}

const Context = createContext({} as InitialDataContextInterface);

const InitialDataProvider = ({ children }) => {
    const [initialData, setInitialData] = useState<InitialDataType | null>(
        null
    );

    return (
        // eslint-disable-next-line react/jsx-no-constructed-context-values
        <Context.Provider value={{ initialData, setInitialData }}>
            {children}
        </Context.Provider>
    );
};

export default InitialDataProvider;

export const useInitialData = () => useContext(Context);

这是我的主页组件:

import React, { useContext, useEffect } from 'react';
import axios from 'axios';
import UkRegulation from '../../regulations/UkRegulation/UkRegulation';
import GameIframe from '../../components/GameIframe/GameIframe';
import { useInitialData } from '../../context/InitialDataContext';

const Home = () => {
    const { initialData, setInitialData } = useInitialData();

    useEffect(() => {
        axios
            .get(
                'https://myUrl.com/my-endpoint'
            )
            .then((response) => {
                setInitialData(response.data);
                console.log('InitialData', initialData);
            })
            .catch((error) => {
                console.log(error);
            });
    }, []);

    return (
        <div>
            <UkRegulation />
            <GameIframe />
        </div>
    );
};

export default Home;
reactjs
  • 1 1 个回答
  • 25 Views

1 个回答

  • Voted
  1. Best Answer
    Yaman Abd
    2023-08-18T00:53:12+08:002023-08-18T00:53:12+08:00

    在您的useEffect钩子中,您在更新状态后立即记录状态,但钩子setState提供的函数useState是异步的,因此这意味着该值不会立即更新。要查看更新的值,您应该使用单独的值useEffect并将initialData其作为依赖项传递给钩子依赖项数组。

    useEffect(() => {
      console.log("InitialData", initialData);
    }, [initialData]);
    

    并且您提供的代码似乎不应不断发出新请求,因为useEffect由于依赖项数组为空,钩子仅在安装组件时调用一次,[]因此它可能是代码的另一部分,导致组件重新渲染并usseEffect再次调用钩子。

    • 1

相关问题

Sidebar

Stats

  • 问题 205573
  • 回答 270741
  • 最佳答案 135370
  • 用户 68524
  • 热门
  • 回答
  • Marko Smith

    使用 <font color="#xxx"> 突出显示 html 中的代码

    • 2 个回答
  • Marko Smith

    为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类?

    • 1 个回答
  • Marko Smith

    您可以使用花括号初始化列表作为(默认)模板参数吗?

    • 2 个回答
  • Marko Smith

    为什么列表推导式在内部创建一个函数?

    • 1 个回答
  • Marko Smith

    我正在尝试仅使用海龟随机和数学模块来制作吃豆人游戏

    • 1 个回答
  • Marko Smith

    java.lang.NoSuchMethodError: 'void org.openqa.selenium.remote.http.ClientConfig.<init>(java.net.URI, java.time.Duration, java.time.Duratio

    • 3 个回答
  • Marko Smith

    为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)?

    • 4 个回答
  • Marko Smith

    为什么库中不调用全局变量的构造函数?

    • 1 个回答
  • Marko Smith

    std::common_reference_with 在元组上的行为不一致。哪个是对的?

    • 1 个回答
  • Marko Smith

    C++17 中 std::byte 只能按位运算?

    • 1 个回答
  • Martin Hope
    fbrereto 为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类? 2023-12-21 00:31:04 +0800 CST
  • Martin Hope
    比尔盖子 您可以使用花括号初始化列表作为(默认)模板参数吗? 2023-12-17 10:02:06 +0800 CST
  • Martin Hope
    Amir reza Riahi 为什么列表推导式在内部创建一个函数? 2023-11-16 20:53:19 +0800 CST
  • Martin Hope
    Michael A fmt 格式 %H:%M:%S 不带小数 2023-11-11 01:13:05 +0800 CST
  • Martin Hope
    God I Hate Python C++20 的 std::views::filter 未正确过滤视图 2023-08-27 18:40:35 +0800 CST
  • Martin Hope
    LiDa Cute 为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)? 2023-08-24 20:46:59 +0800 CST
  • Martin Hope
    jabaa 为什么库中不调用全局变量的构造函数? 2023-08-18 07:15:20 +0800 CST
  • Martin Hope
    Panagiotis Syskakis std::common_reference_with 在元组上的行为不一致。哪个是对的? 2023-08-17 21:24:06 +0800 CST
  • Martin Hope
    Alex Guteniev 为什么编译器在这里错过矢量化? 2023-08-17 18:58:07 +0800 CST
  • Martin Hope
    wimalopaan C++17 中 std::byte 只能按位运算? 2023-08-17 17:13:58 +0800 CST

热门标签

python javascript c++ c# java typescript sql reactjs html

Explore

  • 主页
  • 问题
    • 最新
    • 热门
  • 标签
  • 帮助

Footer

AskOverflow.Dev

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve