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

Question

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

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

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

80 | var focused = _this.state.focused; 81 | var opened = _this.props.opened！== undefined？ _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！== undefined？

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

警告：失败的道具类型：提供给data的string类型的无效道具DropDownList，预计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;
};

最后，减速器在商店中定义

部件/存储/ configureStore.js

const reducers = {
    vesseltypes: Types.reducer
};

我已经测试了API以确保数据存在且工作正常，我已经将数据从商店的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);