Ошибка формы Redux при отправке пустого поискового запроса

Question

Я пытаюсь взять значения из формы Redux и передать их какому-либо действию: / action / index.js

 export function getResult(values) {

  const search = values.searchText;
  const category = values.categoryList;

  const URL = `https://localhost:44308/api/values?searchString=${search}&searchCat=${category}`;

  const response = axios.get(`${URL}`);

  return {
    type: GET_RESULT,
    payload: response
  };
}

src / userIndex.jsx

import React, { Component } from 'react';
import SearchForm from './searchForm';
import ResultList from './resultList';
import { connect } from 'react-redux';
import { getResult } from '../../actions/index';

class UserIndex extends Component {
  values = {
    searchForm: {
      searchText: '',
      categoryList: ''
    }
  };

  Submit = values => {
    this.props.getResult(values);
  };

  render() {
    return (
      <div>
        <SearchForm onSubmit={this.Submit} />
        <ResultList />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { documents: state.documents };
}

export default connect(
  mapStateToProps,
  { getResult }
)(UserIndex);

reducer_documents.jsx

import _ from 'lodash';
import { GET_RESULT } from '../actions/actionCreator';

const DocumentReducer = (state = {}, action) => {
  switch (action.type) {
    case GET_RESULT:
      return _.mapKeys(action.payload.data, 'id');
    default:
      return state;
  }
};

export default DocumentReducer;

Я всегда получаю эту ошибку:

index.jsx: 15 Uncaught TypeError: Невозможно прочитать свойство 'searchText' из неопределенного

  12 | }
  13 | 
  14 | export function getResult(values) {
> 15 |   const search = values.searchText;
  16 |   const category = values.categoryList;
  17 | 
  18 |   const URL = `https://localhost:44308/api/values?searchString=${search}&searchCat=${category}`;

searchForm.jsx

import React, { Component } from 'react';
import { connect } from 'react-redux';

import CategoriesList from './categories_list';
import SearchText from './search_input';

import { reduxForm } from 'redux-form';

class SearchForm extends Component {
  render() {
    return (
      <form className="form-inline" onSubmit={this.props.handleSubmit}>
        <div className="input-group col-md-3">
          <SearchText />
        </div>
        <div className="input-group col-md-3">
          <CategoriesList />
        </div>
        <button type="submit" className="btn btn-primary">
          Submit
        </button>
      </form>
    );
  }
}

SearchForm = reduxForm({
  // a unique name for the form
  form: 'searchForm'
})(SearchForm);

// export default SearchForm;

function mapStateToProps(state) {
  return { ...state.values };
}

export default connect(
  mapStateToProps,
  { reduxForm }
)(SearchForm);

categoryList.jsx

import _ from 'lodash';
import React, { Component } from 'react';
import { Field } from 'redux-form';
import { fetchCategories } from '../../actions';
import { connect } from 'react-redux';

class CategoriesList extends Component {
  componentDidMount() {
    this.props.fetchCategories();
  }

  renderCategoryList = field => {
    return (
      <select
        className="form-control"
        value={field.input.value}
        onChange={value => field.input.onChange(value)}
      >
        {this.renderCategories()}
      </select>
    );
  };

  render() {
    const renderList = _.map(this.props.categories, ctg => {
      return (
        <option key={ctg.id} value={ctg.id}>
          {ctg.name}
        </option>
      );
    });

    return (
      <Field name="categoryList" component="select" className="form-control">
        <option />
        {renderList}
      </Field>
    );
  }
}

function mapStateToProps(state) {
  return { categories: state.categories };
}

export default connect(
  mapStateToProps,
  { fetchCategories }
)(CategoriesList);

searchInput.jsx

import React, { Component } from 'react';
import { Field } from 'redux-form';

class SearchText extends Component {
  renderSearchText = field => {
    return <input type="text" className="form-control" {...field.input} />;
  };

  render() {
    return <Field name="searchText" component={this.renderSearchText} />;
  }
}

export default SearchText;

Я попытался установить проверку типа, но она все еще не работает.

Значения корректно обновляются, если я пишу в поле searchText или выбираю категорию.Проблема, вероятно, в неопределенном начальном состоянии полей.

Как я могу решить эту проблему?Где должно быть правильное место для установки начального состояния для этих параметров?спасибо.

Answer 1

из документации по избыточной форме, в форме избыточного имени есть метод handleSubmit, поэтому вам нужно написать что-то вроде

const { handleSubmit } = this.props;
onSubmit={handleSubmit(this.Submit)}

source - https://redux -form.com / 7.1.1 /документы / FAQ / handlevson.md /

Answer 2

После повторного просмотра, место, куда вы должны добавить параметры по умолчанию, должно быть в самой функции getResult:

export function getResult(values = {searchText: "", categoryList: ""}) {
     const search = values.searchText;
     const category = values.categoryList;

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

Answer 3

Попробуйте передать объект по умолчанию со свойствами, которые вам нужны, в аргумент состояния в редукторе.что-то вроде:

function getResultReducer(state = {searchText: "", categoryList: ""}, action) {
  ...
}