如何在 React with Redux 项目中将我的 props 数据转换为数组？

Question

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

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

但是我收到以下错误：

道具类型失败：提供给 object 类型的无效道具 data 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 是在 store 中定义的

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 以将您的对象映射到值，它在 Kendo docs 中指定，或者您可以查看他们准备的 Stackblitz project。

Answer 2

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

const alltypes = await response.json();

您的 console.log 显示，它包含整个响应，而不仅仅是容器类型数组。

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

Answer 3

我假设您需要一个字符串数组，其中值位于键 TypeName 中。 首先，我建议重命名你的变量，如果没有任何后端限制，比如它是如何通过 fetch 返回的。 例如，这些：

alltypes => allTypes
vesseltypes => vesselTypes

关于这个问题，您只需要在将数据传递到组件之前进行快速转换。不确定下拉组件如何使用原始输入数据，但我会将数组减少为单独的变量以仅创建一次。

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

最后一件事是在哪里进行此转换，当检索到结果并且 Redux 通过 connect 函数的第一个参数 mapStateToProps 更新你的 props 时。

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