Question

在package.json文件中，我具有：

历史记录：“ ^ 4.7.2”，

反应：“ ^ 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-form：“ ^ 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中，我用checkQueryValidity（res）替换了SCPromise，并替换了querySC（res）；使用dispatch（actions.submit（'SoundCloud'，checkQueryValidty（res）））;

TypeError：无法读取未定义的resolveModel react-redux-form

1 个答案: