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

Question

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

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

页面上的 1 个错误(共 2 个错误)：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 打开 = _this.props.open ！== 未定义 ？_this.props.open： _this.state.open; 82 |变量值 = _this.值;

83 | var selectedIndex = data.findIndex(function (i) { return areSame(i， value， dataItemKey); }); 84 |变量文本 = getItemValue(value， textField); 85 |var valueDefaultRendering = (React.createElement("span"， { className： "k-input" }， text)); 86 | var valueElement = valueRender ！== undefined ？

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

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

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

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

组件/容器/小部件数据.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);

组件/商店/类型.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;
};

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

组件/存储/配置存储.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);