Как мне преобразовать мои реквизиты в массив в моем проекте React с Redux?

Question

В моем решении, являющемся проектом ASP.NET Core с компонентами React, Redux и Kendo React, мне нужно возвращать свои реквизиты в виде массива.Я использую виджет Kendo Dropdown, как показано ниже.

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

Однако я получаю сообщение об ошибке:

Ошибка типа проп: недопустимая поддержка data типа objectпередано DropDownList, ожидаемое array.

Итак, я проверил свои возвращенные данные из props.vesseltypes, который является массивом, а не плоским массивом.

Вот мой код для возврата этих данных:

компоненты / сосуды / 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;
};

И, наконец, в хранилище определен редуктор

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 , или вы можете проверить проект Stackblitz , который они подготовили .

Answer 2

Я предполагаю, что вам нужен массив строк, где значение находится в ключе TypeName. Прежде всего, я бы предложил переименовать ваши переменные, если нет никаких внутренних ограничений, например, как они возвращаются через fetch. Например, эти:

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

Answer 3

Выглядит так, как будто вы забыли извлечь судовТипы из ответа здесь

const alltypes = await response.json();

, и ваш console.log показывает, что он содержит целый ответ, а не только массив vesselTypes.

РЕДАКТИРОВАТЬ: ВклВ довершение всего, ваше соединение кажется неправильным, вы просто передаете все состояние как опору, не извлекая нужную вам часть.