import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  value: window.innerWidth
};

const screenSizeSlice = createSlice({
  name: 'screenSize',
  initialState,
  reducers: {    
    screenSizeResize: (state, actions) => {
      state.value = actions.payload
    },
  }
})

export const {screenSizeResize } = screenSizeSlice.actions

export default screenSizeSlice.reducer   

所以我有这个组件,我有这个错误:

ReferenceError:未定义窗口

如果我用typeof window !== 'undefined'来解题,它会导致水合.我用的是nextjsbtw.

如何解决这个问题?

我试过条件渲染,但它引起了水化.

推荐答案

当应用程序启动时,我们还没有窗口对象.因为它仅在组件安装之后才可用.因此,我认为您必须将该代码移到useEffect()中,或者如果您使用的是基于类的组件,则移到ComponentDidmount()

用于功能组件.

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  value: ""
};

const screenSizeSlice = createSlice({
  name: 'screenSize',
  initialState,
  reducers: {    
    screenSizeResize: (state, actions) => {
      state.value = actions.payload
    },
  }
})

export const {screenSizeResize } = screenSizeSlice.actions

export default screenSizeSlice.reducer 

首先给它一个空值,当应用程序在App.js中安装它时,在useEffect中设置这个值.

const { screenSizeResize } = useSelector(screenSizeSlice)

useEffect(() => {
   screenSizeResize(size)
})

我想这会起作用的,如果它起作用的话通知我.

Reactjs相关问答推荐

在Reaction中更新状态时,我将变得未定义

React Context未正确更新

React:关于useEffect钩子如何工作的困惑

如何从Reaction-Arborist树获取排序数据

在Reaction中的第一次装载时,Use Effect返回空数组

用于获取带有事件处理程序的API的动态路由

试图从Amazon-Cogito-Identity-js模拟CogitoUser.authateUser,并将其获取为未定义的S

onClick 事件处理程序未应用于样式组件

使用 MUI 菜单时添加新 html 元素时布局意外滚动跳转

React Native - 如何处理错误带有有效负载的NAVIGATE操作..未被任何导航器处理?

无法通过react 路由中的链接传递信息

FlatList 不在 React Native 中呈现项目

如何在 ChartJS 中操作 Y 轴

antd 找不到 comments

如何使用react 路由将 url 参数限制为一组特定的值?

如何根据数据库中的值设置单选按钮选中? - react

为什么 React 会多次调用我的应用程序的某些函数?

在react 路由dom版本6中的组件内添加路由

如何在按钮左下角制作 Material UI 菜单下拉菜单

react 路由:router.ts:11 没有匹配的路由位置/管理