TypeError: Cannot read property '0' of undefined resolveModel react-redux-form

Question

Inside of the package.json file I have:

history: "^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",

react-scripts: "1.1.4",

redux: "^3.5.2",

redux-form: "^7.3.0",

redux-logger: "^2.6.1"

The error I'm getting is

Cannot read property '0' of undefined; 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;
}

Inside of 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;

Inside of SoundCloudExp.js. In form component:

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

What is peculiar is that when I include console.log statements inside of the resolveModel.js file, I get three different variations of the expected response. Why is that?

flo527 flo527 · Accepted Answer · 2018-07-30T18:36:06

So basically I had to set a proper trigger for the NoSearchResults error, so I set that up in a sibling folder called services in a file called checkQueryValidity.js:

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

And in the file SoundCloudExp.jsx, I replaced SCPromise w/ checkQueryValidity(res) and replaced querySC(res); with dispatch(actions.submit('SoundCloud', checkQueryValidty(res)));

TypeError: Cannot read property '0' of undefined resolveModel react-redux-form

1 Answers