使用選擇器 State 未定義

Question

頁面未呈現，引用TypeError: state is undefined ，追溯至SelectForm.js中的這一行： const filter = useSelector(state => state.filter); .

我花了幾個小時試圖弄清楚我做錯了什么。 我已經嘗試過 createSelector 但沒有奏效。 我嘗試發送“獲取初始狀態”操作，但沒有成功。 該組件被包裝在提供者標簽中。 我不確定為什么我無法訪問 state。 在這一點上，我看不到任何我一直在尋找它的缺陷。

代碼片段

減速器.js

let initialState = {
    filter: {
        country: null,
        state: null,
        level: null,
        team: null
    },

    isDBConnecting: false, 
    isDBConnected: false, 
    isDBError: false 
}

const SelectorReducer = (state=initialState, action) => {
    switch (action.type) {        
        case 'DB_CONNECT_INIT':
            return {
                ...state,
                isDBConnecting: true,
                isDBConnected: false,
                isDBError: false,
            };
...
...
}

export default SelectorReducer;

動作.js

export const initializeDBConnection = () => {
    return {
        type: 'DB_CONNECT_INIT'
    }
};

父組件.js

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux'; //import provider to provide component access to the state

//Component imports
import SelectForm from './components/SelectForm'
import SelectorReducer from '.../reducer.js'

const SelectorStore = createStore(SelectorReducer);

const ParentComponent = () => {

    return (
        <div className="page-container">
            <div id="carousel">
                <div id="wrapper">
                    <Provider store={SelectorStore}>
                        <SelectForm />
                    </Provider>
                </div>
            </div>
    </div>
    )
}

SelectForm.js（子組件，包裹在上面的 Provider 標簽中）

//IMPORTS
import React from 'react'; //import react
import { useSelector, useDispatch } from 'react-redux';

//COMPONENT IMPORTS
import FormGroup from '../FormGroup';
import { * as actions } from '.../actions.js';

const SelectForm = (props) => {

    //STATEFUL IMPORTS
    //filter
    const filter = useSelector(state => state.filter);

Answer 1

感謝@NicholasTower 評論中的答案。 我的減速器沒有默認情況

default: return state

把它放進去解決了這個問題。

Answer 2

  let filter = useSelector(state => {
    console.log('State: ', state);
    return state.pieChart.filter;
  });

確保為 state 使用正確的state 。

添加一個用於調試的控制台並檢查state object。 很多時候我們使用多個reducers ，這使得我們的組件state嵌套在全局 object 中。

Answer 3

在 ParentComponent.js 中，您說的是<Provider store={TeamSelectorStore}> 。 我想你的意思是說<Provider store={SelectorStore}>

Answer 4

有時減速器的開關塊中斷會導致 state 中未定義的道具。

Answer 5

由於大寫/小寫錯誤也可能發生此錯誤。

let horns = useSelector(state => state.largeRhinohorns);
let horns = useSelector(state => state.largeRhinoHorns);

Answer 6

我們應該通過以下方式導入 useSelector 表單 react-redux 然后 select 用戶詳細信息表單存儲

import { useSelector } from 'react-redux'

const User = () => {

const userInfo= useSelector(state => state.user)

return <div>userInfo.name</div>

}

Answer 7

就我而言，我在 didMount 階段存儲來自 Redux state 的數據，而 Redux 狀態尚未完全上傳。

  const currentUser = useAuth();
  useEffect(() => {
    form.setFieldValue('email', currentUser.email);
  }, []);

將currentUser添加到useEffect依賴數組，為我解決它：

  useEffect(() => {
    form.setFieldValue('email', currentUser.email);
  }, [currentUser]);