为什么我收到错误 data.findIndex is not a function 在我的 React with Redux 项目中？

Question

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

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

页面上的 2 个错误中的 1 个 TypeError: data.findIndex is not a function 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 |变量打开 = _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 |变量文本 = 获取项目值（值，文本字段）； 85 | var valueDefaultRendering = (React.createElement("span", { className: "k-input" }, text)); 86 | var valueElement = valueRender !== undefined ?

在控制台中这个错误显示为：

警告：失败的道具类型：无效的道具data 类型为string 提供给DropDownList，预期array。

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

这是我目前的代码，请注意我的数据来自通用存储库。

components/vessels/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);

components/store/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 是在 store 中定义的

components/store/configureStore.js

const reducers = {
    vesseltypes: Types.reducer
};

我已经测试了 API 以确保数据存在并且可以正常工作，我已经从商店中的 Types.js 将所述数据记录到控制台，我可以看到它已返回。我对 redux 的反应非常陌生，所以我试图在这里找到自己的方式，感谢任何帮助。

Answer 1

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

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

那么，在你的代码中，你需要引用redux store的值：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);