与useContext一起使用时，useReducer未更新initialState

Question

我有一个表单，它必须预先填充一些值。这些价值观来自上下文。我正在使用一个reducer来处理表单的状态，所以我根据从上下文中获得的内容来设置reducer的初始状态。现在发生的是上下文发生了变化，但reducer状态没有改变。

const { selectedCurrency } =
useContext<CurrenciesContextType>(CurrenciesContext);
const [state, dispatch]: [CurrencyReducerState, Dispatch<any>] = useReducer(
currencyReducer as ReducerWithoutAction<CurrencyReducerState>,
selectedCurrency,
init
);

理想情况下，只要selectedCurrency发生更改，它就应该设置初始值。但这并没有发生。知道为什么吗？。我已经将父组件封装在提供程序中。此外，每次selectedCurrency更改时，我都会看到selectedCurtain更改，但reducer状态不会更改。如果组件被重新渲染，那么reducer会获取更改并正确初始化。有办法做到这一点吗？

Answer 1

我在reducer中添加了一个updateState操作，并将该操作封装在useEffect中，selectedCurrency作为其依赖项，从而实现了这种行为：

useEffect(() => {
actions.updateState(selectedCurrency)
}, [selectedCurrency])

下面是动作的样子：

updateState: (updatedState): void => 
dispatch({type: "update", payload: updatedState})

init((函数在首次调用useReducer时仅执行一次。

类似的问题-正在更新useReducer'；状态'；使用useEffect

Answer 2

如果没有更多的示例代码，很难说，但也许您忘记了用上下文提供程序包装代码？需要使用上下文(对象和/或回调(的代码需要包装在提供程序中。

return (
<div className="App">
{/* CurrenciesProvider enables children to use the context info */ } 
<CurrenciesProvider>
<CurrencySelector />
<CurrencyDisplay />
</CurrenciesProvider>
</div>
);

这是一个代码沙盒。。。https://codesandbox.io/s/kind-noether-zr9dq