Question

我正在尝试从Redux表单中获取值，并将其传递给这样的Action： /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未捕获的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;

我已经尝试过设置idof检查，但仍然无法使用。

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

我该如何解决？为这些参数设置初始状态的正确位置应该在哪里？谢谢。

Answer 1

尝试将具有所需属性的默认对象传递给化简器中的state参数。像这样：

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

Answer 2

根据redux-form文档，redux-form提供了handleSubmit方法，因此您需要编写类似

的内容

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

源-https://redux-form.com/7.1.1/docs/faq/handlevson.md/

Answer 3

再次查看之后，应该在getResult函数本身中添加默认参数的地方：

    async function testRun() {

        if (fs.existsSync('./curl.sh')) {
          shell.rm('-rf', './curl.sh');
        }

        createInsertCurlReq.createInsertCurlReq(process.argv[2]).then(() => {
           shell.chmod('+x', './curl.sh');
           shell.exec('./curl.sh')
           return
        })

      }
    }

curlCreation.js



     function createInsertCurlReq(filePath) {
          return utils
            .readJSONFileOnDisk(filePath)
            .then(data => {
              obj = JSON.parse(data);
              let resultArr = [];
              for (let key in obj) {
                for (let innerKey in obj[key]) {
                  let arrayNew = {};
                  arrayNew[key] = obj[key][innerKey].resolved;
                  resultArr.push(arrayNew);
                }
              }
              return resultArr;
            })
            .then(data => {
              if (!fs.existsSync("./curl.sh")) {
                shell.touch("./curl.sh");
              }
              return data;
            })
            .then(data => {
              for (let i = 0; i < data.length; i++) {
                for (let key in data[i]) {
                  fs.appendFile(
                    "curl.sh",
                    `curl -X POST -H "xxx",
                    function(err) {
                      if (err) throw err;
                    }
                  );
                }
              }
            });
        }
        module.exports = { createInsertCurlReq: createInsertCurlReq };

我不知道为什么不提交表单就调用此函数。

提交空搜索值查询时发生Redux Form错误

3 个答案: