TypeError:无法读取未定义的resolveModel react-redux-form的属性“0”

Question

在package.json文件中，我有：

历史记录："^4.7.2"，

react："^16.4.1"，

react-dom："^16.4.1"，

react-redux："^5.0.7"，

react-redux-form："^1.16.9"，

react-router-dom："^4.3.1"，

react-router-redux："^4.0.8"，

反应脚本："1.1.4"，

redux："^3.5.2"，

redux-表单："^7.3.0"，

redux-logger："^2.6.1“

我得到的错误是

无法读取未定义的属性“”0“”；resolveModel node_modules/react-redux-form/lib/utils/resolve-model.js:32

function resolveModel(model, parentModel) {
  if (parentModel) {
    console.log('parentModel :', parentModel);
    if (model[0] === '.' || model[0] === '[') {  <-- It points to this line over here.
      return '' + parentModel + model;
    }

    if (typeof model === 'function') {
      return function (state) {
        return model(state, parentModel);
      };
    }
  }

  return model;
}



   function wrapWithModelResolver(WrappedComponent) {
  var ResolvedModelWrapper = function (_PureComponent) {
    _inherits(ResolvedModelWrapper, _PureComponent);

    function ResolvedModelWrapper() {
      _classCallCheck(this, ResolvedModelWrapper);

      return _possibleConstructorReturn(this, (ResolvedModelWrapper.__proto__ || Object.getPrototypeOf(ResolvedModelWrapper)).apply(this, arguments));
    }

    _createClass(ResolvedModelWrapper, [{
      key: 'render',
      value: function render() {
        var _context = this.context,
            parentModel = _context.model,
            localStore = _context.localStore;


        var resolvedModel = resolveModel(this.props.model, parentModel); <------------------------ resolveModel gets called here.

        return _react2.default.createElement(WrappedComponent, _extends({}, this.props, {
          model: resolvedModel,
          store: localStore || undefined
        }));
      }
    }]);

    return ResolvedModelWrapper;
  }(_react.PureComponent);

  ResolvedModelWrapper.displayName = 'Modeled(' + WrappedComponent.displayName + ')';

  process.env.NODE_ENV !== "production" ? ResolvedModelWrapper.propTypes = {
    model: _propTypes2.default.any
  } : void 0;

  ResolvedModelWrapper.contextTypes = {
    model: _propTypes2.default.any,
    localStore: _propTypes2.default.shape({
      subscribe: _propTypes2.default.func,
      dispatch: _propTypes2.default.func,
      getState: _propTypes2.default.func
    })
  };

  return ResolvedModelWrapper;
}

在src/reducers/index.js内部

import { combineReducers } from 'redux';
import { createForms, formReducer } from 'react-redux-form';
import { routerReducer } from 'react-router-redux';

const SoundCloudState = {
    input: ''
}

const reducer = combineReducers({
    ...createForms({
        SoundCloud: SoundCloudState
    }), 
    routing: routerReducer,
    form: formReducer
});

export default reducer;

在SoundCloudExp.js内部。在表单组件中：

import React, { Component } from 'react';
import {querySC} from './actions/index';
import { connect } from 'react-redux';
import { Form, Control, actions, Errors } from 'react-redux-form';

class SoundCloudExp extends Component {

    handleSubmit(query){

        const {querySC, dispatch} = this.props;

        let SCPromise = fetch('/', {
            method: 'post',
            body: query
        })
        .then((res) => res.json())
        .then((res) => {
            querySC(res);
        });

        dispatch(actions.submit('SoundCloud', SCPromise));
    }

    render(){

        return (
            <Form id="SC-search" model="SoundCloud" onSubmit={(query) => this.handleSubmit(query)}>
                <div className='search-bar'>
                    <Control.text model=".input"
                                  className='search'
                                  placeholder='Search'/>
                    <Errors model=".input"
                            messages={{NoSearchResults: 'This query returned no results.'}}/>
                </div>
                <Control.button className='search-btn'>
                    Search
                </Control.button>
            </Form>
        )
    }
}

export default connect(null, {querySC})(SoundCloudExp);

奇怪的是，当我在resolveModel.js文件中包含console.log语句时，我得到了预期响应的三种不同变体。为什么会这样呢？

​

​

Answer 1

所以基本上我必须为NoSearchResults错误设置一个适当的触发器，所以我在一个名为checkQueryValidity.js的文件中设置了一个名为services的同级文件夹：

export default function checkQueryValidty(val){
    return async (dispatch) => {
        dispatch(actions.setPending('SoundCloud.input', true));

            try {
                let response = await querySC(val);
                dispatch(actions.setValidity('SoundCloud.input', {
                    queries: response.queries
                }));
            }
            catch(error){
                dispatch(actions.setErrors('SoundCloud.input', {
                    NoSearchResults: error.message
                }));
            }

        dispatch(actions.setPending('SoundCloud.input', false));
    }
}

在SoundCloudExp.jsx文件中，我将SCPromise替换为/ checkQueryValidity(res)，并将querySC(Res)替换为dispatch(actions.submit('SoundCloud'，checkQueryValidty(Res)；