UseSelector 状态未定义答案

【问题标题】：UseSelector State is UndefinedUseSelector 状态未定义
【发布时间】：2020-05-31 02:57:22
【问题描述】：

页面不渲染，引用TypeError: state is undefined，回溯到SelectForm.js中的这一行：const filter = useSelector(state => state.filter);。

我花了几个小时试图找出我做错了什么。我已经尝试过 createSelector 但没有奏效。我尝试发送“获取初始状态”操作，但没有成功。该组件被包装在提供者标签中。我不确定为什么我无法访问该州。在这一点上，我看不到任何我一直在寻找它的缺陷。

代码片段

reducer.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;

actions.js

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

ParentComponent.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);

【问题讨论】：

您的减速器是否有default 和return state; 的外壳？
@NicholasTower 哦，天哪，这太疯狂了。不，它没有。谢谢！
reducer 输入端口的路径中有语法错误：import SelectorReducer from '.../reducer.js'。应该只有 2 个句点。另外，createStore(Reducer) 不应该是 createStore(SelectorReducer)，<Provider store={TeamSelectorStore}> 不应该是 <Provider store={SelectorStore}>？
@TheDarkIn1978 我已经更正了这些语法错误。它们只出现在这里，而不是在代码中，因为我在这里对代码 sn-ps 做了一些缩短，以使它们更具可读性。我使用“...”来缩写导入中的文件路径。

标签： javascript reactjs react-redux

【解决方案1】：

感谢@NicholasTower 在 cmets 中的答案。我的减速器没有默认情况

default: return state

把它放进去解决了这个问题。

【讨论】：

很好的答案！也为我省了很多麻烦。
即使我的 Reducer 中有默认情况，也会出现什么问题？
这是一个非常聪明的答案，谢谢

【解决方案2】：

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

确保您为state 使用正确的对象。

添加一个用于调试的控制台并检查state 对象。很多时候我们使用多个reducers，这使得我们的组件state嵌套在全局对象中。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

有时在 reducer 的 switch 块中有一个 break 会导致 prop 没有在 state 中定义。

【讨论】：

【解决方案5】：

这个错误也可能因为大写/小写错误而发生。

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

【讨论】：