Question

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

运行应用程序时出现以下错误：

1个页面上的2个错误TypeError：data.findIndex不是函数   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 | var open =   _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 | var text =     getItemValue（value，textField）; 85 | var valueDefaultRendering =     （React.createElement（“ span”，{className：“ k-input”}，文本））； 86 |     var valueElement = valueRender！==未定义？

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

警告：道具类型失败：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在商店中定义

components / store / configureStore.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);

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

1 个答案: