我有一个使用 React 和 Redux 的 ASP.NET Core 项目,我还使用 Kendo React UI。我正在尝试将数据返回到我的 Kendo 小部件之一,但当我尝试这样做时出现错误,我需要帮助来确定我做错了什么。
当我运行我的应用程序时,出现以下错误:
1 of 2 errors on the page 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 focused = _this.state.focused; 81 | var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened; 82 | var value = _this.value;
block 引用>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 ?
在控制台中,此错误显示为:
Warning: Failed prop type: Invalid prop
data
of typestring
supplied toDropDownList
, expectedarray
.该错误是有道理的,但我返回的数据应该是一个数组。但事实并非如此,因为它似乎没有返回任何内容。所以我做错了什么。
这是到目前为止我的代码,请注意我的数据是从通用存储库提供的。
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 的 react 还很陌生,所以我试图在这里找到我的方法,感谢任何帮助。
最佳答案
您需要删除以下状态定义,因为您想要引用 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);
关于javascript - 为什么我收到错误 data.findIndex is not a function in my React with Redux 项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55654275/