时间戳

首页 > 解决方案 > 使用 React Redux 加载栏：无法读取未定义的属性“默认”

javascript - 使用 React Redux 加载栏：无法读取未定义的属性“默认”

问题描述

编辑

使用更新的更新包更新并安装了 lib，但现在出现以下错误，

TypeError: Cannot read property 'default' of undefined
Function.mapStateToProps [as mapToProps]
node_modules/react-redux-loading-bar/build/loading_bar.js:300
  297 | 
  298 | var mapStateToProps = function mapStateToProps(state, ownProps) {
  299 |   return {
> 300 |     loading: state.loadingBar[ownProps.scope || _loading_bar_ducks.DEFAULT_SCOPE]
  301 |   };
  302 | };
  303 |

以前的：

我在这里React Redux Loading Bar使用TylerMcginnis 。请注意，我没有使用加载栏中间件，而是使用调度。我错过了什么或做错了什么？

TypeError: state.loadingBar is undefined
Uncaught TypeError: state.loadingBar is undefined
    Redux 7
    React 3
    ConnectFunction Redux
    React 18
    js index.js:20
    Webpack 7

这是代码，

import React, { Fragment } from 'react';
import { connect } from 'react-redux';
//    import LoadingBar from 'react-redux-loading';
import LoadingBar from 'react-redux-loading-bar';

function Login({ users, userKeys, loading }) {
    return (
        <Fragment>
            <LoadingBar />
            <div className='container'>
                {loading ? null : (
                    <div>
                        <label htmlFor='users'>Please select a User</label>
                        <br />
                        <select id='users' name='usersList'>
                            {userKeys.map(id => (
                                <option value={id}>{users[id].name}</option>
                            ))}
                        </select>
                    </div>
                )}
            </div>
        </Fragment>

    );
}

function mapStateToProps({ users }) {
    return {
        loading: users === null,
        users,
        userKeys: Object.keys(users)
    };
}

export default connect(mapStateToProps)(Login);

减速机指数：

import { combineReducers } from "redux";
import { loadingBarReducer } from 'react-redux-loading-bar';
import questions from './questions';
import users from './users';

export default combineReducers({
    loadingBarReducer,
    questions,
    users
});

行动 ：

export function handleInitialData() {
    return dispatch => {
        dispatch(showLoading());
        return getInitialData().then(({users, questions}) => {
            dispatch(receiveQuestions(questions));
            dispatch(receiveUsers(users));
            dispatch(hideLoading());
        });       
    };
}

标签： javascriptreactjsredux

解决方案

修复了为大家创建沙盒示例时的问题：D ...

主要问题：

reducer 应该具有对象/字段名称，loadingBar以便库能够识别 reducer。

这一小改动解决了减速器中的问题，

export default combineReducers({ users, loadingBar: loadingBarReducer });

这是沙盒链接

推荐阅读