无法解构属性react.js useSelector

Question

我有一个错误 Cn 不会解构“(0,react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(...)”的属性“status”，因为它未定义。

我正在尝试使用“toast”处理来自服务器的错误 但是当我在 RegisterPage.jsx 中编写此代码时，该页面甚至没有为我打开。

注册页面.jsx

const { status } = useSelector(state => state.auth )

    useEffect(() => {
        if (status) {
            toast(status)
        }
    }, [status])

store.js

export const store = configureStore({
    reducer:{
        auth: authSlice
    },
})

authSlice.js

const initialState = {
    user: null,
    token: null,
    isLoading: false,
    status: null,
}

Answer 1

您可以通过执行以下操作来解决此问题

const auth = useSelector(state => state.auth )

    useEffect(() => {
        if (auth?.status) {
            toast(auth?.status)
        }
    }, [auth?.status])

您很可能在严格模式下运行 React，并且它在严格模式下渲染两次/多次。因此，在第一次渲染时，您会收到

undefined

，在这些渲染结束时，您会获得正确的值。

此外，它会运行两次/多次来为您检测副作用，它可以通过使其更具确定性来帮助您发现错误。

Answer 2

看起来注册切片时出了问题。使用下面的代码更改您的代码并进行测试。

Slice.js

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

const initialState = {
    user: null,
    token: null,
    isLoading: false,
    status: null,
}

const slice = createSlice({
  name: 'authSlice',
  initialState,
  reducers: {
    getUsers(state, action) {
      const { data, meta = {} } = action.payload;
      state.users = data;
    },
  }
});

export const { authSlice } = slice;


export default slice;

const { status = 'Something' } = useSelector(state => state.auth )

看起来

state.auth

没有返回任何东西。