为什么我收到错误data.findIndex不是我的React with Redux项目中的函数？

Question

我有一个带有React和Redux的ASP.NET Core项目，我也在使用Kendo React UI。 我正在尝试将数据返回到我的Kendo小部件之一，但是当我尝试这样做时遇到错误，我需要帮助确定我做错了什么。

当我运行我的应用程序时，出现以下错误：

TypeError页面上的2个错误中的1个：data.findIndex不是一个函数DropDownList / _this.renderDropDownWrapper C：/Users/Allan/node_modules/@progress/kendo-react-dropdowns/dist/es/DropDownList/DropDownList.js：83

80 | var focus = _this.state.focused; 81 | var open = _this.props.opened！==未定义？ _this.props.opened：_this.state.opened; 82 | var value = _this.value;

83 | var selectedIndex = data.findIndex（function（i）{return areSame（i，value，dataItemKey）;}）; 84 | var text = getItemValue（value，textField）; 85 | var valueDefaultRendering =（React.createElement（“ span”，{className：“ k-input”}，text））； 86 | var valueElement = valueRender！==未定义？

在控制台中，此错误显示为：

警告：prop类型失败：提供给DropDownList string类型无效的prop data ，期望array 。

该错误是有道理的，但是我返回的数据应该是一个数组。 不是因为它似乎没有返回任何东西。 所以我做错了。

到目前为止，这是我的代码，请注意，我的数据是从通用存储库提供的。

组件/容器/ WidgetData.js

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { actionCreators } from '../../store/Types';
import { DropDownList } from '@progress/kendo-react-dropdowns';

class WidgetData extends Component {
    state = {        
        vesseltypes: ""
    };
    componentWillMount() {
        this.props.requestTypes();        
    }
    render() {            
        return (            
            <div>    
                <DropDownList data={this.state.vesseltypes} />
            </div>
        );
    }
}
export default connect(
    state => state.vesseltypes,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(WidgetData);

部件/存储/ Types.js

const requestVesselTypes = 'REQUEST_TYPES';
const receiveVesselTypes = 'RECEIVE_TYPES';
const initialState = {
    vesseltypes: [],
    isLoading: false
};

export const actionCreators = {
    requestTypes: () => async (dispatch) => {
        dispatch({ type: requestVesselTypes });

        const url = 'api/KendoData/GetVesselTypes';
        const response = await fetch(url);
        const alltypes = await response.json();

        dispatch({ type: receiveVesselTypes, alltypes });
    }   
}
export const reducer = (state, action) => {
    state = state || initialState;

    if (action.type === requestVesselTypes) {
        return {
            ...state,
            isLoading: true
        };
    }
    if (action.type === receiveVesselTypes) {
        alltypes = action.alltypes;
        return {
            ...state,
            vesseltypes: action.alltypes,
            isLoading: false
        }
    }    
    return state;
};

最后，reducer在商店中定义

部件/存储/ configureStore.js

const reducers = {
    vesseltypes: Types.reducer
};

我已经测试过API以确保数据在那里并且可以正常工作，我已经从Types.js中的Types.js将所述数据记录到控制台中，并且可以看到返回了数据。 我对redux的反应非常陌生，因此我尝试在这里找到自己的出路，感谢您的帮助。

Answer 1

您需要删除以下状态定义，因为您要引用redux存储中的值，而不是本地值：

class WidgetData extends Component {
    state = {        
        vesseltypes: ""
    };

然后，在您的代码中，您需要引用redux存储值： this.props.vesseltypes ：

class WidgetData extends Component {
    state = {        
        vesseltypes: ""
    };
    componentWillMount() {
        this.props.requestTypes();        
    }
    render() {            
        return (            
            <div>    
                <DropDownList data={this.props.vesseltypes} />
            </div>
        );
    }
}

并且您需要更改连接定义：

export default connect(
    vesseltypes => state.vesseltypes,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(WidgetData);