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

Question

我正在使用 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)，我想我一定做错了什么，但我仍然不知道。
任何建议将不胜感激。

Answer 1

在这种情况下:

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

setAppContext只是一个函数， 它不是来自 React API .
为了改变状态，并使 React 意识到它的变化，你需要使用来自 React API 的任何 setter 函数。

Like setter function returned from useState().

查看类似问题 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;