Почему я получаю ошибку data.findIndex не является функцией в моем проекте React с Redux? - PullRequest
Новая
       10

Почему я получаю ошибку data.findIndex не является функцией в моем проекте React с Redux?

0 голосов
/ 12 апреля 2019

У меня есть проект ASP.NET Core с React и Redux, я также использую интерфейс Kendo React. Я пытаюсь вернуть данные одному из моих виджетов 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 открыл = _this.props.opened! == undefined? _this.props.opened: _this.state.opened; 82 | значение переменной = _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! == undefined?

В консоли эта ошибка отображается как:

Предупреждение: сбойный тип опоры: недопустимая опора data типа string поставлено на DropDownList, ожидается array.

Ошибка имеет смысл, но возвращаемые данные должны быть массивом. Это не так, поскольку, кажется, ничего не возвращает. Так что я сделал что-то не так.

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

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

компоненты / магазин / 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;
};

И, наконец, в магазине определен редуктор

компоненты / магазин / configureStore.js 

const reducers = {
    vesseltypes: Types.reducer
};

Я протестировал API, чтобы убедиться, что данные есть, и он работает, я записал эти данные на консоль из Types.js в хранилище и вижу, что они возвращены. Я очень новичок в реакции с редуксом, поэтому я пытаюсь найти свой путь здесь, и любая помощь приветствуется.

1 Ответ

1 голос
/ 12 апреля 2019

Вам необходимо удалить следующее определение состояния, так как вы хотите сослаться на значение в хранилище с избыточностью, а не на локальное значение: 

class WidgetData extends Component {
    state = {        
        vesseltypes: ""
    };

Затем в вашем коде вам нужно сослаться на значение хранилища избыточности: 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);
...