上下文 API 中的 React useState 值始终使用初始值而不是更新值

Posted 2023-02-14

【中文标题】上下文 API 中的 React useState 值始终使用初始值而不是更新值

【英文标题】：React useState value in Context API always use initial value instead of updated value

【发布时间】：2020-10-10 15:21:33

【问题描述】：

我正在使用 Context API 来存储全局值，例如 userId，以便在整个应用程序的组件之间共享。

这是 context.js 的样子：

import React,  useState  from 'react';

const AppContext = React.createContext(
    date: new Date(),
    userId: null,
    groupId: null,
    setAppContext: () => ,
);

export const AppContextProvider = (props) => 
    const initState = 
        date: new Date(),
        userId: null,
        groupId: null,
        setAppContext: (appContext) => 
            console.log(state); // this line always log initial state value after first update
            setState( ...state, ...appContext );
        ,
    
    const [state, setState] = useState(initState);
    return (
        <AppContext.Provider value=state>
            props.children
        </AppContext.Provider>
    )


export default AppContext;

基本上，我试图使用一个大上下文来保存我一起使用的所有值并在子组件中访问它们，如下所示：

// access value and the setter
const  userId, setAppContext  = useContext(AppContext);

// setting value
setAppContext(
    userId: newUserId,
);

问题是，setter 函数中的“状态”变量似乎没有更新，当我尝试像上面那样设置新值时，其他值会被其初始值覆盖（例如 userId 得到更新但其余返回null），我想我一定做错了什么，我仍然不知道。

任何建议将不胜感激。

【参考方案1】：

在这种情况下：

const AppContext = React.createContext(
    date: new Date(),
    userId: null,
    groupId: null,
    setAppContext: () => ,
);

setAppContext 只是一个函数，它不是来自 React API。

为了改变状态，并让 React 意识到它的变化，你需要使用 React API 中的任何 setter 函数。

就像从useState()返回的setter函数。

查看类似问题here。

因此，在您的情况下，要解决它，您需要传递一个真正的 setter：

const initState = 
  date: new Date(),
  userId: null,
  groupId: null,
;

const AppContext = React.createContext();

export const AppContextProvider = (props) => 
  const [state, setState] = useState(initState);

  const setAppContext = (appContext) => 
    console.log(state);
    setState( ...state, ...appContext );
  ;

  return (
    <AppContext.Provider value= ...state, setAppContext >
      props.children
    </AppContext.Provider>
  );
;

export default AppContext;