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

Я использую 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,
});

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

Любые советы будут высоко ценится.


reactjs javascript use-state use-context
person DANKEST    schedule 20.06.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В таком случае:

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;
person Dennis Vash    schedule 20.06.2020