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

Question

I have an ASP.NET Core project with React and Redux, I'm also using the Kendo React UI. I'm trying to return data to one of my Kendo widgets but I'm getting an error when I try to do so and I need help identifying what I've done wrong.

When I run my application I get the error of:

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 ?

In the console this error shows as:

Warning: Failed prop type: Invalid prop data of type string supplied to DropDownList , expected array .

The error makes sense, but the data I'm returning should be an array. It's not though as it doesn't appear to return anything. So I've done something wrong.

Here is my code so far, please note that my data is served from a generic repository.

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

And finally, the reducer is defined in the store

components/store/configureStore.js

const reducers = {
    vesseltypes: Types.reducer
};

I've tested the API to ensure data is there and it works, I've logged said data to the console from Types.js in the store and I can see it's returned. I'm very much new to react with redux so I'm trying to find my way here and any help is appreciated.

Answer 1

You need to remove the following state definition, since you want to refer to the value in the redux store, not to a local value:

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

Then, in your code, you need to refer to the redux store value: this.props.vesseltypes :

class WidgetData extends Component {
    state = {        
        vesseltypes: ""
    };
    componentWillMount() {
        this.props.requestTypes();        
    }
    render() {            
        return (            
            <div>    
                <DropDownList data={this.props.vesseltypes} />
            </div>
        );
    }
}

And you need to change the connect definition:

export default connect(
    vesseltypes => state.vesseltypes,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(WidgetData);