Реагировать на значение useState в Context API всегда использовать начальное значение вместо обновленного значения

Question

Я использую Context API для хранения глобального значения, такого как userId, для обмена между компонентами всего приложения.

Вот как выглядит контекст. 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,
});

Проблема в том, что переменная "state" в функции установки не кажется, обновляется, и когда я пытаюсь установить новое значение, как указано выше, другие значения перезаписываются его начальным значением (например, userId получает обновление, но остальные возвращаются к нулю), что, я думаю, я должен сделать что-то не так, и я все еще понятия не имею.

Мы будем благодарны за любой совет.

Answer 1

В данном случае:

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

setAppContext - это просто функция, это не из React API .

Для изменения состояния и Чтобы React знал об его изменении, вам необходимо использовать любую функцию установки из React API.

Как функция установки, возвращенная из useState().

См. аналогичный вопрос здесь .

Итак, в вашем случае для его решения вам нужно передать настоящий сеттер:

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;