Question

在我的解决方案中，这是一个带有React，Redux和Kendo React Components的ASP.NET Core项目，我需要将props作为数组返回。我正在使用Kendo Dropdown小部件，如下所示。

<DropDownList data={this.props.vesseltypes} />

但是我收到以下错误：

道具类型失败：提供给类型data的道具object无效 DropDownList，预期array。

因此，我检查了从props.vesseltypes返回的数据，该数据是一个数组，而不是平面数组。

这是我如何返回此数据的代码：

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 {
componentWillMount() {        
    this.props.requestTypes();      
}
render() {
    console.log(this.props.vesseltypes)
    return (
            <div>
                <DropDownList data={this.props.vesseltypes} />
            </div>
        );
    }
}
export default connect(
    vesseltypes => 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
};

Controllers / KendoDataController.cs

    [HttpGet]
    public JsonResult GetVesselTypes()
    {
        var types = _vesselTypeService.GetVesselTypes();

        return Json(types);
    }

因此，下拉小部件需要一个数组，我通过商店返回的是一个对象数组。因此，下拉菜单无法使用它，因为它不是预期的。我的问题是，如何将其作为单个数组或平面数组返回？

Answer 1

首先从状态中解构要映射到属性的部分：

export default connect(
  ({vesseltypes}) => ({vesseltypes}),
  dispatch => bindActionCreators(actionCreators, dispatch)
)(WidgetData);

然后您就可以将vesselTypes映射到字符串数组，因为这正是 Kendo DropdownList 所期望的：

<div>
  <DropDownList data={this.props.vesseltypes.map((vessel) => vessel.TypeName)} />
</div>

应该达到的目标。

或者，您可以研究如何实现将对象映射到值的HOC，该HOC在Kendo docs中指定，或者您可以签出它们已经准备好的Stackblitz project。

Answer 2

您似乎忘记了在此处从响应中提取vesselTypes

const alltypes = await response.json();

并且您的console.log显示，它包含整个响应，而不仅仅是vesselTypes数组。

编辑：最重要的是，连接似乎是错误的，您只是将整个状态作为道具传递，而不提取所需的部分。

Answer 3

我假设您需要一个字符串数组，其中值在键TypeName中。首先，如果没有任何后端限制（例如如何通过提取返回），我建议重命名变量。例如，这些：

alltypes => allTypes
vesseltypes => vesselTypes

关于此问题，您只需要进行快速转换，然后再将数据传递到组件中。不知道下拉组件如何使用原始输入数据，但我会将数组简化为单独的变量以仅创建一次。

然后将变量vesselTypeList传递到组件DropDownList中。

最后是在获取结果并且Redux通过mapStateToProps函数的第一个参数connect更新道具时进行转换的地方。

const getTypeList = (vesseltypes) => {
  return vesseltypes.reduce((result, item) => {
    result.push(item.TypeName);
    return result;
  }, []);
}

const mapStateToProps = ({ vesseltypes }) => { vesseltypes: getTypeList(vesseltypes) };

export default connect(
    mapStateToProps,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(WidgetData);

如何在React with Redux项目中将道具数据转换为数组？

3 个答案: