reactjs - Redux Form 提交空搜索值查询时出错

问题描述

我正在尝试从 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 未捕获类型错误：无法读取未定义的属性“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);

类别列表.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);

搜索输入.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;

我尝试过设置 typeof 检查，但仍然无效。

如果我在 searchText 字段上书写或选择一个类别，则这些值会正确更新。问题可能是字段的未定义初始状态。

我该如何解决这个问题？应该在哪里为这些参数设置初始状态？谢谢你。

标签： reactjsreact-reduxredux-form

reactjs - Redux Form 提交空搜索值查询时出错

问题描述

解决方案

推荐阅读