当导航向后反应导航时，Redux状态恢复到inital状态

Question

不确定这种预期行为是否存在，但我试图在页面导航之间使用来保持状态。

因此，我有一个全屏水平滚动列表，每次只有一个元素可见，为了跟踪哪个页面是可见的，我正在跟踪视图/数组中元素的活动索引。

所以我有我的状态

type State = {
   pages: Array<{ id, title, name }>,
   activeIndex: number
}

每次用户滚动列表时，我都会看到新项目的索引并更新状态。

// page slice
const initialState: State = {
    pages: undefined; // async call populates
    activeIndex: 0;
}
const PageListSlice = createSlice({
    name: 'State',
    initialState,
    reducers: {
        setActivePage(
            state: State,
            action: PayloadAction<{ index: number }>,
        ) {
            state.activeIndex = action.payload.index;
            return state;
        },
    }
});

export const setActiveIndex = (activeIndex: number): AppThunk => async (
    dispatch: AppDispatch,
) => {
    dispatch(setLearnState({index: activeIndex}));
};

并在组件挂载上加载状态：

export const ListPage: React.FC<Props> = ({ navigation }): JSX.Element => {
    const dispatch: Dispatch<any> = useDispatch();
    const pageListSlice: State = useSelector((state: RootState) => state.PageState);

    useFocusEffect(
        React.useCallback(() => {
            console.log(pageListSlice.activeIndex); // always returns initial value of 0
        }, []),
    );

    return (
        // ...
    );
}

现在的问题是，当我使用ReactiveNavigation回到那个页面时，现有的状态会被初始状态替换。这令人困惑，因为现有的状态仍然存在于屏幕上。我的意思是，我将导航回列表中的正确项(在此之前)，但状态将是不正确的。状态返回到初始状态，因此即使我查看在索引7中找到的屏幕，来自Redux的状态也是初始值0。

这是预期的行为吗？在我看来，必须将状态存储在缓存中才能在页面导航之间持久化，这似乎很疯狂。

我已经在子组件中加载了状态，并且出现了正确的状态，所以只有当您导航回页时，它才会恢复到初始状态。我尝试过使用useFocusEffect加载状态/添加一个新的还原器来触发，但这也会返回初始状态。

我试图尽可能地简化这件事，以隔离我所面临的问题。我希望这是合理的。一切帮助都是欢迎的，谢谢。

版本：

"@react-navigation/bottom-tabs": "^5.2.5",
"@react-navigation/native": "^5.1.4",
"@react-navigation/stack": "^5.2.9",
"@reduxjs/toolkit": "^1.4.0",
"expo": "^37.0.3",
"react": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
"react-redux": "^7.2.0",
"redux-thunk": "^2.3.0"

Answer 1

您的日志是不正确的，因为您已经将一个空依赖项数组传递给React.useCallback，这意味着回调从不更新以获得正确的值。

如果将正确的依赖项数组传递给React.useCallback (在本例中为pageListSlice.activeIndex)，那么它将记录正确的值：

useFocusEffect(
  React.useCallback(() => {
    console.log(pageListSlice.activeIndex);
  }, [pageListSlice.activeIndex])
)

您应该使用https://www.npmjs.com/package/eslint-plugin-react-hooks插件来捕捉这些错误。