Question

我正在使用上下文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函数。

类似于useState()中返回的setter函数。

看到类似的问题here。

因此，要解决此问题，您需要传递一个真实的二传手：

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;

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

1 个答案: