javascript - 为什么我收到错误 data.findIndex is not a function in my React with Redux 项目？

Question

我有一个使用 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;

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 type string supplied to DropDownList, expected 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 的 react 还很陌生，所以我试图在这里找到我的方法，感谢任何帮助。

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);