Блог

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

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

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

components/store/configureStore.js

 const reducers = {
    vesseltypes: Types.reducer
};
  

Контроллеры / KendoDataController.cs

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

        return Json(types);
    }
  

Итак, выпадающий виджет ожидает массив, который я возвращаю через хранилище, представляет собой массив объектов. Таким образом, это не может быть использовано выпадающим списком, потому что это не то, что он ожидает. Мой вопрос в том, как мне вернуть это как единый массив или плоский массив?

Сначала деконструируйте часть, которую вы хотите сопоставить со свойством из вашего состояния:

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

Тогда вы могли бы просто сопоставить vesselTypes с массивом строк, поскольку, похоже, этого ожидает выпадающий список Kendo:

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

Что должно привести к тому, чего вы хотели достичь.

В качестве альтернативы вы можете изучить, как реализовать HOC для сопоставления ваших объектов со значениями, это указано в документах Kendo, или вы можете проверить подготовленный ими проект Stackblitz.

Похоже, вы забыли извлечь vesselTypes из ответа здесь

 const alltypes = await response.json();
  

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

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

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

 alltypes => allTypes
vesseltypes => vesselTypes
  

Что касается проблемы, вам просто нужно выполнить быстрое преобразование перед передачей данных в компонент. Не уверен, как раскрывающийся компонент использует исходные входные данные, но я бы сократил массив в отдельную переменную, чтобы создать его только один раз.

Затем передайте переменную vesselTypeList в component DropDownList .

Последнее, что нужно сделать, это преобразовать, когда результат будет получен, и Redux обновит ваш реквизит с помощью mapStateToProps первого аргумента connect функции.

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

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

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