React - 每当更新反应上下文中的状态时如何调用函数？

Posted 2023-04-14

【中文标题】React - 每当更新反应上下文中的状态时如何调用函数？

【英文标题】：React - How to call a function whenever a state in react context is updated?

【发布时间】：2021-12-11 13:23:07

【问题描述】：

我有一个包含很多组件的反应应用程序。我正在使用 React context api 来管理应用程序中的状态。

我在上下文中的反应状态如下所示。

 key1: value1, key2: value2,  key3 :  key4 :  key5 : value5   

所以，它基本上是一个嵌套的 json。

现在，假设键 3 正在从 react 组件树中的许多组件更新。它可以被树层次结构中的任何组件更新。

因此，在这种情况下，我想在 key3 更改时调用后端 api。我该如何做？

编辑 1：-

以下是我设置上下文的方式。

import React,  createContext, useEffect, useReducer  from "react";

import  reducer, initialState  from "./reducers";
import  useActions  from "./actions";

const AppContext = createContext(initialState);

const AppProvider = ( children :  children: any ): any => 
    const [state, dispatch] = useReducer(reducer, initialState);
    const actions = useActions(state, dispatch);

    useEffect(() => 
        console.log("Called ");
    , [state.decision])

    return (
        <AppContext.Provider value= state, dispatch, actions >
            children
        </AppContext.Provider>
    );
;

export  AppContext, AppProvider ;

【问题讨论】：

恕我直言，听起来您需要一个状态管理解决方案（redux 等）。 React 上下文，AFAIK，不能很好地支持这个用例。

这能回答你的问题吗？ How to compare previous context with current context in React 16.x?

【参考方案1】：

useEffect 一定有帮助。

只需将要监视更改的上下文部分添加到依赖项数组中即可。

useEffect(() => 
  //do something
, [context.key3])

【讨论】：

感谢您的意见。这个我试过了。它适用于第一次渲染，但不适用于上下文状态的后续更新。

显示你的上下文代码和你调用useEffect的地方

我已经用上下文代码更新了问题。

所以，我的代码适用于原始键值对，但不适用于 json 对象，如果我更改了 json 对象中的某些内容，useEffects 不会运行。但是，如果我有一个原始值，那么它就可以工作。

【参考方案2】：

要在值更改时调用函数，请在 react 中使用 useEffect 和 useState 挂钩。

const [contextValue, setContextValue] = useState()
useEffect(() => 
  //Call your function
, [contextValue])

同时更新值：

setContextValue(key1:value1,...rest)
setContextValue(key2:value2,...rest)
setContextValue(key3:,...rest)
setContextValue(key3:key4:,...rest1,...rest2)
setContextValue(key3:key4:key5:,...rest1,...rest2,...rest3) // and so on

这样，对contextValue 的所有更改都会触发单个useEffect。

演示上下文：

const TestContext = React.createContext()

export function useTestContext() 
    return useContext(TestContext)


export function TestContextProvider( children ) 
    const [contextValue, setContextValue] = useState()
    
    useEffect(() => 
      //Call your function
    , [contextValue])

    const value = 
        setContextValue,
        contextValue
    

    return <TestContext.Provider value=value>children</TestContext.Provider>

【讨论】：

我有一个组件的层次结构。 setContext 会在组件树的较低位置可用吗？

取决于您导出的内容。导出一组子值，以便您可以更改它。或创建一个函数并将其导出。 @ashishjmeshram