4

我正在使用 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），我想我一定做错了什么，但我仍然不知道。

任何建议将不胜感激。

4

1 回答 1

2

在这种情况下：

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

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

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

就像从useState().

在这里看到类似的问题。

因此，在您的情况下，要解决它，您需要传递一个真正的 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;
于 2020-06-20T13:42:45.300 回答